Question

好的，所以我有2个div：“imgforplaces_thumbnailwrapper”和“checkbutton”。我想这样做，当我徘徊到“imgforplaces_thumbnailwrapper”时，“imgforplaces_thumbnailwrapper”和“checkbutton”都会变为不透明度0.5。当我将鼠标悬停在“checkbutton”时，“checkbutton”将变为不透明度1，而“imgforplaces_thumbnailwrapper”不透明度将变为0.5。

当我将鼠标悬停在“imgforplaces_thumbnailwrapper”时它运行良好，但是，当我将鼠标悬停在“checkbutton”时，“imgforplaces_thumbnailwrapper”不会变回不透明度0.5！现在我知道是什么原因，CSS没有以前的选择器，我如何使用javascript来做到这一点？

.imgforplaces_thumbnailwrapper:hover {
    opacity: 0.5;   
    }

.imgforplaces_thumbnailwrapper:hover ~ .checkbutton {
    opacity: 0.5;
}   

.checkbutton:hover {
    opacity: 1;
}    

.checkbutton:hover ~ .imgforplaces_thumbnailwrapper { //this will not work because previous selector is not available
    opacity: 0.5;
}

值得注意的是，我写了一个javascript hover函数，当我将鼠标悬停在“imgforplaces_thumbnailwrapper”时，“checkbutton”将显示（原来显示：none）。（效果很好）

我的divs：

echo '<div class=container>';
echo '<div class=imgforplaces_thumbnailwrapper>';
        echo "<a class='ajax' href='image_color_box.php?id=".$row['id']."' title='Home'>";
        echo "<img src='../imgforplaces_thumbnail/" . $row['location_name'] . ".png' />";
        echo '</a>';
        echo '</div>';
        echo '<div class=checkbutton><img src="../images/haventchecked.png" /></div>';
echo '</div>'; //end div container

Answer 1

尝试添加两个元素之间共享的公共类，让我们称之为“sharedclass”。然后尝试以下CSS：

.sharedclass:hover{
     opacity:0.5;
}
.checkbutton:hover{
     opacity:1;
}

确保将checkbutton规则放在sharedclass规则之后，因为它会覆盖50％的不透明度。

Answer 2

您正在使用的~ CSS选择器用于匹配在给定元素之后的兄弟姐妹。因为.imgforplaces_thumbnailwrapper在.checkbox之前出现，.checkbutton:hover ~ .imgforplaces_thumbnailwrapper将无法正常运作。

这篇CSS Tricks文章详细介绍了一般的兄弟组合。

如何使用CSS选择器在div之前选择div

2 个答案: