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

好的，所以我有2个div：“imgforplaces_thumbnailwrapper”和“checkbutton”。我想这样做，当我徘徊到“imgforplaces_thumbnailwrapper”时，“imgforplaces_thumbnailwrapper”和“checkbutton”都会变为不透明度0.5。当我徘徊到“checkbutton”时，“checkbutton”将变为不透明度1，而“imgforplaces_thumbnailwrapper”不透明度将变回0.5。如何使用CSS选择器在div前选择div

当我将鼠标悬停到“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鼠标功能“checkbutton”将显示（最初显示：无）当我悬停“imgforplaces_thumbnailwrapper”。（这个效果很好）

我的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

来源

2013-07-11 Architheutus

这是你的元素的顺序？你正在使用A〜B和B〜A，这是错误的。 A〜B意味着B在A之后 – pasine

尝试添加两个元素之间共享一个通用类，让称它为“sharedclass”。那就试试下面的CSS：

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

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

来源

2013-07-11 23:14:47 Ermir

您正在使用的CSS选择器~用于匹配来自之后的给定元素的兄弟。因此，.imgforplaces_thumbnailwrapper之前.checkbox,.checkbutton:hover ~ .imgforplaces_thumbnailwrapper将不会按预期工作。

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

来源

2013-07-11 23:21:29 jharding

似乎css没有选择器来选择前一个元素。如何在不使用css的情况下执行此操作？ – Architheutus

你可以用JavaScript实现你想要的行为。如果您有兴趣，我可以编辑我的答案以提供纯粹的JavaScript解决方案和jQuery解决方案。 – jharding

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

回答

相关问题