HTML和CSS：在悬停显示div [英] HTML and CSS: On hover display div
本文介绍了HTML和CSS：在悬停显示div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图得到它，以便当有人悬停在一个div框，它将显示一个单独的div框下面。我将如何做这个？
I'm trying to get it so that when someone hovers over a div box it will display a separate div box below it. How would I go about doing this?
HTML：
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Harry Kitchener - Home</title>
</head>
<body>
<div id="center">
<div id="content">
<h1>Home</h1>
<div id="product1"></div>
<div id="product1hover"></div>
<div id="product2"></div>
<div id="product2hover"></div>
<div id="product3"></div>
<div id="product3hover"></div>
</div>
</div>
</body>
</html>
CSS：
#center
{
position: relative;
margin: auto;
width: 1000px;
height: 600px;
top: 20%;
border:5px solid;
border-radius:15px;
background-color: #305052;
}
#product1
{
position: relative;
float: right;
margin-top: 50px;
margin-right: 40px;
margin-left: 10px;
width: 200px;
height: 200px;
background-color: #1F3536;
}
#product1:hover
{
#product1hover
}
#product2
{
position: relative;
float: right;
margin-top: 50px;
margin-left: 10px;
width: 200px;
height: 200px;
background-color: #1F3536;
}
#product3
{
position: relative;
float: right;
margin-top: 50px;
width: 200px;
height: 200px;
background-color: #1F3536;
}
推荐答案
<div id="product1">
<div id="product1hover"></div>
</div>
以下css会执行
#product1hover{
display:none;
}
#product1:hover #product1hover{
display:block;
}
更新
使用现有的HTML，您可以实现如下：
With your existing HTMLyou can achieve this as follows:
#product1hover{
display:none;
}
#product1:hover + #product1hover{
display:block;
}
这篇关于HTML和CSS：在悬停显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
