我可以只使用 css 来做到这一点,否则使用 jQuery 吗?
如果我将鼠标悬停在 ul
内的第一个 li
上,想要定位 ul:after
。
ul.secondary:after {
border-color: #f3f4f1 transparent;
border-width: 0 8px 8px;
right: 11px;
top: 0;
left: 0;
border-style: solid;
content: "";
position: absolute;
}
/*this is not working*/
ul.secondary li:first-child a:hover + ul.primary ul.secondary::after {
border-color: #9caa9c transparent;
}
ul.secondary li:first-child a:hover {
color: red;
}
<ul class="primary">
<li>
<ul class="secondary">
<li><a href="">hover me makes ":after" change border color</a></li>
<li><a href="">text</a></li>
<li><a href="">text</a></li>
<li><a href="">text</a></li>
<li><a href="">text</a></li>
</ul>
</li>
</ul>
最佳答案
你也不能为伪元素
编写jquery。但你可以做这样的事情。我添加了 content:"hi"
而不是 content:""
来向您展示它如何在您拥有的 :after
中工作。
$('.secondary>li:first-child>a').mouseover(function(){
$('.secondary').addClass('hover');
//You can write whatever you want in here
});
$('.secondary>li:first-child>a').mouseout(function(){
$('.secondary').removeClass('hover');
//You can write whatever you want in here
});
ul.secondary:after {
content:"";
border-color: #f3f4f1 transparent;
border-width: 0 8px 8px;
right: 11px;
top: 0;
left: 0;
border-style: solid;
position: absolute;
}
ul.secondary li:first-child a:hover {
color: red;
}
ul.secondary.hover:after {
border-color: red transparent;
}
ul.secondary.hover>li{
color:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul class="primary">
<li>
<ul class="secondary">
<li><a href="">hover me makes ":after" change border color</a> </li>
<li><a href="">text</a></li>
<li><a href="">text</a></li>
<li><a href="">text</a></li>
<li><a href="">text</a></li>
</ul>
</li>
</ul>
关于javascript - 悬停在 ul 子元素上效果 ul after style,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51871106/