悬停在一个对象上以转换另一个对象

问题描述：

我在HTML中有两个圆圈（div）。如何点击一个圆圈来改造其他圆（比如改变其不透明度：0.5;）使用过渡CSS3中悬停在一个对象上以转换另一个对象

感谢

欢迎来到StackOverflow！为了让我们更好地为您提供帮助，能否请您更新您的问题，以便在[**最小，完整和可验证的示例**]中显示**相关代码**（http://stackoverflow.com/帮助/ MCVE）。如果你能让我们知道你有什么[**尝试到目前为止**]（http://meta.stackoverflow.com/questions/261592）来解决你的问题，这也会很有帮助。有关详细信息，请参阅有关[**如何提出良好问题**]（http://stackoverflow.com/help/how-to-ask）的帮助文章，并参加该网站的[**游览**]（http://stackoverflow.com/tour)) –

答

使用“+”选择

<div> 
    <div class="circle1"></div> 
    <div class="circle2"></div> 
</div>

这个CSS做什么你想要做

.circle2{ 
    transition: opacity 1s; 
} 
.circle1:hover + circle2{ 
    opacity: 0.5; 
}

使用jQuery，如果你想改变透明度，当你点击CIRCLE1

正确的CSS规则是.circle2 {0}转换：不透明度1s; } 。圆1：悬停+圆2 {不透明度：0.5; } – Vyas

答

以防万一你想使用jQuery，这里是你可以做的：

//select circle1 and do something when it's clicked 
    $('.circle1').click(function() { 

    //when circle1 clicked, do something to circle2 
    $('.circle2').css('opacity', '.5'); 

});

悬停在一个对象上以转换另一个对象

相关推荐