jquery - 悬停时影响父项的子项

标签 jquery html css

寻找 child 的CSS影响 parent

我看过/用过

.linkage:hover ~ .cover 
.linkage:hover + .cover 
.linkage:hover > .cover 

是否有一个会影响 .linkage 的父级?

<div class = "container">
 <div class="linkage"></div>
</div>

CSS

.linkage:hover ????? .container

最佳答案

你不能那样做,但你可以利用 jQuery/javascript 事件处理程序来做到这一点

$('.linkage').hover(function(e) {
  $(this).closest('.container').toggleClass('link-hover', e.type == 'mouseenter')
})
.container.link-hover {
  background-color: lightgrey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  container
  <span class="linkage">linkage</span>
</div>

关于jquery - 悬停时影响父项的子项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30543323/

相关文章:

javascript - 在函数外部使用 $when...then() 内部的变量

javascript - AngularJs 计数器可计数到特定目标数

javascript - 计算百分比网格布局单元格宽度

jquery - 去掉点击事件off()后如何使用on()?

javascript - 如何通过 Javascript 删除输入

html - 将图像叠加到CSS中的div

javascript - 强制网页加载到页面顶部

javascript - 如何提供动态(计算的)CSS 属性

CSS 空白 : nowrap causes container to expand to fit all text

javascript - 点击外部导航关闭