3

看起来很简单，但我无法让它工作。

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 是完成它的唯一方法，那也可以。

谢谢！

4

3 回答 3

3

您可以应用父容器并添加伪选择器: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从视图中删除并仅显示文本。

更新

我已将相同类型的父元素应用到您的案例 1，并在下面使用相同的 CSS，它似乎按预期工作。这是我的 jsfiddle：http: //jsfiddle.net/dxwma/18/

于 2013-01-16T14:18:37.557 回答
1

将您的 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;
}
  1. 您的外部容器 .image 最好具有相同的边界（宽度和高度）。
  2. .sharerDiv 的位置值应该是绝对的（所以它可以浮动）。
  3. 悬停应应用于外部容器。

这是您在 jsFiddle 上的代码的编辑分支。

于 2013-01-16T14:43:17.267 回答
0

您必须添加负边距。和其他一些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;
}
于 2013-01-16T14:11:50.517 回答