Question

看起来相当简单，但我无法让它发挥作用。

div包含facebook / twitter链接。它的工作方式是显示图像，然后当有人在其上盘旋时，它会消失，被社交图标取代。

我已经在div中使用了代码来处理文本，但是一旦我添加了图像/脚本，它就会破坏。（我得到的代码也没有图像消失，这是我还没弄明白怎么做的。）

这就是我所拥有的：

<div class="image">
<img src="/some_image.jpg">

<div class="sharerDiv">
<p>Hello!</p>
</div>
</div>

使用以下css：

.sharerDiv {
display:none;
}
img:hover + .sharerDiv {
display:block;
}

这是jsfiddle：http://jsfiddle.net/randomlysid/dxwma/1/

如果可能的话，我想用css做这件事，因为这是我所熟悉的，但如果jQuery是完成它的唯一方法，那也是有用的。

谢谢！

Answer 1

您可以应用父容器并添加伪选择器:hover来修改它的子项，就像这样，

HTML

<div id="social">
  <div class="image">
    <img src="http://lorempixum.com/80/80" />
        <div class="sharerDiv">
        <p>Hello!</p>
        </div>
  </div>
</div>

CSS

#social {
  width: 100px;
  height: 200px;
}

#social:hover img {
  display: none;
}

#social:hover .sharerDiv {
  display: block;
}

现在，当您将鼠标悬停在div#social上时，它会从视图中移除img并仅显示文字。

<强>更新

我已经使用相同的CSS将相同类型的父元素应用于您的Case 1，它似乎按预期工作。这是我的jsfiddle：http://jsfiddle.net/dxwma/18/

Answer 2

将CSS更改为：

.image
{
  width: 80px;
  height: 80px;
}
.sharerDiv
{
  display: none;
  position: absolute;
  z-index: 99;
}
img
{
  position: relative;
  display: block;
}
.image:hover .sharerDiv
{
  display: block;
}
.image:hover img
{
  display: none;
}

您的外部容器.image应该更好地具有相同的边界（宽度和高度）。
.sharerDiv的位置值应该是绝对的（因此可以浮动）。
悬停应该应用于外部容器。

Here是jsFiddle上代码的编辑分支。

Answer 3

您必须添加负边距。和其他一些div。例如，将您的代码更改为：

HTML：

<div class="image">
  <div class="image-container">
    <img src="http://lorempixum.com/80/80">
  </div>
  <div class="sharerDiv">
  <p>Hello!</p>

    </div>

</div>

的CSS：

.sharerDiv{
  display:none;
}
.image-container{
  width: 80px;
  height: 80px;
}
.image-container:hover + .sharerDiv{
  display:block;
  margin-top: -49px;
}
.image-container:hover img{
  visibility: hidden;
}

悬停时用div替换图像

3 个答案: