0

好的，所以我有 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 悬停函数，当我悬停到“imgforplaces_thumbnailwrapper”时，“checkbutton”将显示（最初显示：none）。（这很好用）

我的 div：

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
4

2 回答 2

0

The ~ CSS selector you're using is for matching siblings that come after a given element. So since .imgforplaces_thumbnailwrapper comes before .checkbox, .checkbutton:hover ~ .imgforplaces_thumbnailwrapper won't work as you're expecting.

This CSS Tricks article goes into detail about the general sibling combinator.

于 2013-07-11T23:21:29.553 回答
0

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

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

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

于 2013-07-11T23:14:47.597 回答