CSS 悬停图像显示 div

Question

我尝试添加 + 但 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>

Answer 1

相邻兄弟选择器 (+) 适用于 DOM 中相邻的下一个兄弟而不是前一个。在这种情况下，您将鼠标悬停在 img 上时想要显示的 div 位于 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结构，而是用JS在鼠标悬停在img上时显示div。由于 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

检查这个简单的例子：

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 3

尝试只使用不透明度 - 比选择器简单一些：

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

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

Answer 4

嗯，诀窍是将 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>

CSS 悬停图像显示 div

CSS hover image show div

html

css

css-selectors