我是否可以仅使用CSS在悬停时定位此元素？
我是否可以仅使用CSS在悬停时定位此元素？
提问于 2018-07-29 14:03:56
我有一个i标签，我想在悬停按钮标签时设置它的样式。这是我的结构：
<a class="container">
<form>
<button class="origin">HOVER</button>
</form>
<p>
<i class="destination">TARGET</i>
<p>
</a>只有CSS才能做到这一点吗？(我知道如何使用JS/jQuery)
我想我的目标是这里的诱惑元素，哈哈...
更具体地说，我希望在悬停按钮时使目标文本变为绿色：
<style>
a.container{ border: 1px solid black; display: block; }
a.container:hover{border-color: red; }
a.container:hover p i{color: yellow; }
a form button:hover{ color: red; }
a form button:hover p i{ color: green; } /* not working... */
.origin:hover .destination{ color: green; } /* not working... */
</style>
<a class="container">
<form>
<button class="origin">HOVER</button>
</form>
<p>
<i class="destination">TARGET</i>
<p>
</a>
回答 1
Stack Overflow用户
发布于 2018-07-29 14:21:12
为此，您必须使用jquery/js ...
在css中使用onmouseover、onmouseout和addClass/removeClass设置class的样式
function func(){
$(".destination").addClass("hovering");
}
function outer(){
$(".destination").removeClass("hovering");
}.hovering{
color:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="container">
<form>
<button class="origin" onmouseover="func()" onmouseout="outer()">HOVER</button>
</form>
<p>
<i class="destination">TARGET</i>
<p>
</a>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51577686
复制相关文章
相似问题