CSS悬停图片显示div

时间:2015-01-27 06:14:18

标签: html css css-selectors

我尝试添加+,但div .shopbar_image_over无法显示。



.shopbar_image_container img {
  height: 190px;
  width: 190px;
  cursor: pointer;
}
.shopbar_image_over {
  display: none;
  height: 190px;
  width: 190px;
  opacity: 0.2;
  background: #444;
  position: absolute;
  cursor: pointer;
}
.shopbar_image_container img:hover + .shopbar_image_over {
  display: block;
}

<div class="shopbar_image_container">
  <div class="shopbar_image_over"></div>
  <img src="img/t.jpg" />
</div>
&#13;
&#13;
&#13;

4 个答案:

答案 0 :(得分:4)

相邻的兄弟选择器(+)适用于DOM中相邻的下一个兄弟,而不是前一个兄弟。在这种情况下,您希望在div上悬停时显示的img位于DOM中的img之上或之前,因此+选择器将无效

您必须修改HTML,如下面的代码段或使用替代方法(涉及JS)。

.shopbar_image_container img {
  height: 190px;
  width: 190px;
  cursor: pointer;
  position: relative; /* added for positioning relative to img */
}
.shopbar_image_over {
  display: none;
  height: 190px;
  width: 190px;
  opacity: 0.2;
  background: #444;
  position: absolute;
  top: 8px; /* added for positioning */
  cursor: pointer;
}
.shopbar_image_container img:hover + .shopbar_image_over {
  display: block;
}
<div class="shopbar_image_container">
  <img src="img/t.jpg" />
  <div class="shopbar_image_over"></div>
</div>


选项2:(使用JS)

此处未修改HTML结构,但当鼠标悬停在div上时,JS用于显示img。由于div绝对位于img之上,因此鼠标移出div,当鼠标移出时,隐藏div

document.getElementById("baseImage").onmouseover = function() {
  document.getElementById("divToShow").style.display = "block";
}
document.getElementById("divToShow").onmouseout = function() {
  document.getElementById("divToShow").style.display = "none";
}
.shopbar_image_container img {
  height: 190px;
  width: 190px;
  cursor: pointer;
}
.shopbar_image_over {
  display: none;
  height: 190px;
  width: 190px;
  opacity: 0.2;
  background: #444;
  position: absolute;
  cursor: pointer;
}
<div class="shopbar_image_container">
  <div class="shopbar_image_over" id="divToShow"></div>
  <img src="img/t.jpg" id="baseImage" />
</div>

答案 1 :(得分:2)

诀窍是将position: absolute中的bottom添加到shopbar_image_container

然后添加margin-top: this.height in pxtramsform: translateY(this.height px)以便能够显示.shopbar_image_over

*{box-sizing: border-box}
.shopbar_image_container{
  position: relative;
  height:190px;	
  width:190px;
  margin-top: 190px
}
.shopbar_image_container img{
	height:100%;
	cursor:pointer
}


.shopbar_image_over{
	display:none;
	height:100%;	
	width:100%;
	opacity:0.2;
	background:#444;
	position:absolute;
    bottom: 100%;
	cursor:pointer;
}

.shopbar_image_container img:hover + .shopbar_image_over{
	display:block;	
}
<div class="shopbar_image_container">
  <img src="http://lorempixel.com/400/400/" />
  <div class="shopbar_image_over"></div>
</div>

答案 2 :(得分:1)

检查这个简单的例子:

HTML:

<a>Hover over me!</a>
<div>Stuff shown on hover</div>

CSS:

div {
    display: none;
}

a:hover + div {
    display: block;
}

JSFiddle:http://jsfiddle.net/n03br282/

希望它的帮助!

答案 3 :(得分:0)

尝试使用不透明度 - 选择器更简单:

&#13;
&#13;
.shopbar_image_container img{
height:190px;	
width:190px;
cursor:pointer;
}

.shopbar_image_over{
display:block;
height:190px;	
width:190px;
opacity:0;
background:#444;
position:absolute;
cursor:pointer;
}

.shopbar_image_container .shopbar_image_over:hover{
opacity:0.2;	
 }
&#13;
        	<div class="shopbar_image_container">
            	<div class="shopbar_image_over"></div>
        		<img src="img/t.jpg" />
                               
        	</div>
&#13;
&#13;
&#13;