我已经看到了许多不同的方法来解决以下问题,但它并不像我希望的那样有效......
我需要使用severel divs(item-divs)创建一个div(主div)。
每个item-div必须显示不同的图片,但是当我悬停某张图片时,应隐藏此图片并显示文字 - 在同一个div中。
我怎么能这样做?
答案 0 :(得分:0)
您可以使用CSS伪元素:hover
参见示例: http://jsbin.com/vijawuda/1/edit?html,css,output
HTML标记:
<div class='outer-container'>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 1
</div>
</div>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 2
</div>
</div>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 3
</div>
</div>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 4
</div>
</div>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 5
</div>
</div>
</div>
CSS
.image-holder {
width: 150px;
height: 150px;
display: inline-block;
}
.image-holder > .text {
visibility: hidden;
width: 150px;
height: 150px;
}
.image-holder:hover img {
visibility: hidden;
}
.image-holder:hover .text {
visibility: visible;
}
答案 1 :(得分:0)
例如这个变种:
<div class="wrap">
<div class="child1"></div>
<div class="child2"></div>
</div>
你的css应该是:
.wrap:hover > child2{
opacity: 0;
}
但是静态样式应该是这样的:
.wrap{
width: 200px;
height: 300px; /* maybe auto if you want */
position: relative;
}
.child1{
width: 100%;
height: 100%;
background: lightgreen;
}
.child2{
width: 100%;
height: 100%;
background: #ff3030; /* surely for example */
position: absolute;
top: 0;
left: 0;
}
/* and this block .child2 will be faced. When it's opacity will be 0, you get your effect */
答案 2 :(得分:0)
<强> HTML 强>
<div class="main">
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
</div>
<强> CSS 强>
.main {
width: 1000px;
height: 200px;
}
.content {
width: 150px;
height: 150px;
background-color:#c80000;
color:#fff;
font-family:arial;
text-align:center;
float:left;
margin-left: 10px;
font-size: 20px;
cursor:pointer;
}
.content > div.maincontent + div {
display:none;
padding-top:50px;
}
.content:hover > div.maincontent {
display:none;
}
.content:hover > div.maincontent + div {
display:block;
}