Question

我有一个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-child和:last-child选择器，但这似乎不起作用。我试图将事情应用到.photocategory也没有运气。

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

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

这会改变不透明度，但对h1的可见性没有明显影响。没有Javascript我可以做我想要的吗？也许不同的HTML结构可以更好地工作？

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

Updated Fiddle

Answer 2

我找到了可能更好的做事方式。如果使用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更准确地表示问题，结果可以在this fiddle看到。设置pointer-events: none;会将指针事件放到h1下面的元素，在本例中为img元素，我们不需要更多CSS来修改h1不透明度。< / p>

This fiddle说明了使用photocategory:hover的问题。将鼠标悬停在图像右侧的空白区域会导致悬停事件被激活。

修改某个div的两个子节点的两个不同属性

2 个答案: