悬停在 div 上会影响外部元素 [英] Hover on div affects outside element

问题描述

我试图在 div 悬停时影响外部元素.像这样的:

<div class="affected">你好</div>
<div class="hover-me"></div></div>

CSS:

.hover-me:hover ~ .affected {颜色:}

我尝试过使用其他同级选择器，但它不起作用.

解决方案

使用纯 CSS 会变得非常棘手.

一种方法，如果您不需要包含可悬停子项的 div 上的指针事件(悬停、点击等)，将容器设置为可操作 div，禁用指针事件，在孩子上重置它们，并使用某种魔法使兄弟姐妹在您的 HTML 上以相反的顺序排列，这样它们就可以用兄弟姐妹选择器作为目标(因为您不能定位以前的兄弟姐妹)

有点像

body{/*切换 .affected 和 .hover-container 的顺序，因此 .affected 可以在 HTML 的下方，并以兄弟选择器为目标，同时显示在上面*/显示:弹性；弹性方向:列反向；}.hover-container:hover ~ .affected{/*针对容器上的操作*/背景:红色；}.悬停容器{/*禁用容器上的指针事件，因此进入它不会对兄弟造成悬停效果*/指针事件:无；}.hover-我{/*重置 .hover-me 子对象上的指针事件，因此我们为容器设置的先前 :hover 仅在悬停该子对象时才有效*/指针事件:自动；光标:指针；}分区{边框:2px 纯灰色；边距:20px 40px；文本对齐:居中；}

<div class="hover-container">这是悬停容器<div class="hover-me">悬停我</div></div><div class="受影响">做作的</div>

但这可能是一种不太常见的情况，到那时你最好使用 JS 方法.

I'm trying to affect an outside element when a div is hovered. Something like this:

<div class="affected">
  Hi
</div>

<div>
  <div class="hover-me"></div>
</div>

CSS:

.hover-me:hover ~ .affected {
  color: 
}

I've tried with other sibling selectors but it doesn't work.

解决方案

With pure CSS that's gonna be as tricky as it gets.

An approach, IF you don't need pointer-events (hover, clicks, etc) on the div that contains the hoverable child, is setting the container as actionable div, disabling pointer-events, resetting them on the child, and using some sort of magic to have the siblings in reverse order on your HTML so they can be targeted with sibling selectors (as you cannot target previous siblings)

Something like

body{
  /*switches the oder of .affected and .hover-container, so .affected can be bellow in the HTML and be targeted with sibling selectors, while showing above*/
  display:flex;
  flex-direction:column-reverse;
}

.hover-container:hover ~ .affected{
/*targets the action on the container*/
  background:red;
}

.hover-container{
/*disables pointer-events on the container, so entering it won't cause the hover effect on the sibling*/
  pointer-events:none;
}

.hover-me{
/*resets pointer-events on the .hover-me child, so the previous :hover we set for the container will work only when hovering this child*/
  pointer-events:auto;
  cursor:pointer;
}

div{
  border:2px solid grey;
  margin:20px 40px;
  text-align:center;
}

<div class="hover-container">
  this is the hover container
  <div class="hover-me">hover me</div>
</div>

<div class="affected">
  affected
</div>

But that's probably a not so common scenario, at that point you'll be better off with a JS approach.

这篇关于悬停在 div 上会影响外部元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！