我有一个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>
发布于 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>
https://stackoverflow.com/questions/51577686
复制相似问题