2

我有一个看起来像这样的 HTML 定义的一部分。

<div id="photoindex" class="content">
    <div class="photocategory">
      <a href="/photo/clouds"><img src="img.jpg"></a>
      <h1><a href="/photo/clouds">Clouds</a></h1>
    </div>
</div>

应该是不可见的h1，直到图像悬停在上面，此时h1变得可见，并且img不透明度降低。我目前的尝试有一个不容忽视的小缺陷。

div#photoindex h1 {
    visibility: hidden;
}

div#photoindex h1:hover {
    visibility: visible;
}

div#photoindex img:hover {
    opacity: 0.7;
}

div#photoindex a:hover + h1 {
    visibility: visible;
}

div#photoindex h1:hover + a {
    opacity: 0.7;
}

有了这个，我可以将鼠标悬停在图像上并h1显示出来，并且图像不透明度会下降。但是，如果我将鼠标移到 上h1，图像不透明度会恢复正常。我试过使用:first-childand:last-child选择器，但这似乎不起作用。我没有运气尝试将东西应用于.photocategory任何一个。

div.photocategory:hover a {
    opacity: 0.7;
}

div.photocategory:hover h1 {
    visibility: visible;
}

这会改变不透明度，但对h1. 我可以在没有 Javascript 的情况下做我想做的事吗？也许不同的 HTML 结构会更好？

4

2 回答 2

1

我认为应用样式.photocategory将起作用，假设您的父 div 没有崩溃。

div#photoindex div.photocategory:hover a {
    opacity: 0.7;
}

div#photoindex div.photocategory:hover h1 a {
    opacity: 1;
}

div#photoindex div.photocategory:hover h1 {
    visibility: visible;
}

div#photoindex div.photocategory h1 {
    visibility: hidden;
}

更新小提琴

于 2013-06-10T17:16:31.290 回答
0

我发现什么可能是更好的做事方式。如果div.photocategory:hover使用，则将鼠标悬停在该元素上会产生效果，即使光标当时不在图像上。对于图像占据整体的地方，这不是问题photocategory，但对于没有图像的地方，问题就出现了。

主要问题是鼠标悬停在h1导致该元素被激活，我们实际上想忽略它。要解决此问题，您可以使用以下pointer-events属性。

div#photoindex div.photocategory h1 {
    position: absolute;
    visibility: hidden;
    margin: -40px 0 0 0;
    pointer-events: none;
}

div#photoindex div.photocategory a:hover {
    opacity: 0.7;
}

div#photoindex div.photocategory a:hover + h1 {
    visibility: visible;
}

这个 CSS 更准确地代表了问题，结果可以在这个 fiddle中看到。设置pointer-events: none;将指针事件拖放到 下方的元素h1，在本例中是img元素，我们不需要更多的 CSS 来修改h1不透明度。

这个小提琴说明了使用photocategory:hover. 将鼠标悬停在图像右侧的空白处会激活悬停事件。

于 2013-06-11T13:49:35.237 回答