CSS悬停图片显示div

Question

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div class="shopbar_image_container">
  <div class="shopbar_image_over"></div>
  <img src="img/t.jpg" />
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

相邻的兄弟选择器（+）适用于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>

Answer 2

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

然后添加margin-top: this.height in px或tramsform: 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>

Answer 3

检查这个简单的例子：

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/

希望它的帮助！

Answer 4

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

＆＃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;