CSS悬停图片显示div

问题描述

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

  .shopbar_image_container img {height：190px;宽度：190px; cursor：pointer;}。shopbar_image_over {display：none;身高：190px;宽度：190px;不透明度：0.2;背景：＃444;位置：绝对;我们可以使用鼠标指针来指定鼠标指针的大小，例如：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>  

相邻兄弟选择器（ + ）适用于DOM中相邻的下一个兄弟节点，而不是前一个兄弟节点。在这种情况下，您想在 img 上悬停时显示的 div 高于或低于 img ，因此 + 选择器不起作用。

您必须修改您的HTML，如下面的代码片段或使用替代方法（涉及JS）。 jsdata-hide =false>

.shopbar_image_container img {height： 190px;宽度：190px;光标：指针;位置：相对; / *添加用于定位相对于img * /} shopbar_image_over {display：none;身高：190px;宽度：190px;不透明度：0.2;背景：＃444;位置：绝对; top：8px; / *添加用于定位* / 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）

结构未被修改，但当鼠标悬停在 img 上时，JS用于显示 div 。由于 div 完全位于 img 之上，所以鼠标移到 div上，当鼠标不在时， div 被隐藏。

 <$ c 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;宽度：190px; cursor：pointer;}。shopbar_image_over {display：none;身高：190px;宽度：190px;不透明度：0.2;背景：＃444;位置：绝对; cursor：pointer;}  

 < div class =shopbar_image_container > < div class =shopbar_image_overid =divToShow>< / div> < img src =img / t.jpgid =baseImage/>< / div>  

I have tried to add + but div .shopbar_image_over doesn't show.

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

解决方案

Adjacent Sibling Selector (+) works on the adjacent next sibling in the DOM and not the previous one. In this case the div that you are wanting to show while hovering on the img is above or prior to the img in the DOM and hence the + selector will not work.

You have to either modify your HTML like in the below snippet or use alternate methods (involving 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>

---

Option 2: (Using JS)

Here the HTML structure is not modified, but JS is used to display the div when the mouse is over the img. Since the div is positioned absolutely over the img, the mouse out is set on the div and when the mouse is out, the div is hidden.

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>

这篇关于CSS悬停图片显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！