Question

我需要协助在悬停事件中更改div的css。我的代码：

＆＃13;

<div class = "container-main">
	<div class = "container-inner">
		<ul class = "list">
			<li>Option 1</li>
			<li>Option 2</li>
		</ul>
	</div>
</div>

<div class = "container1">
	<p>Container text</p>
</div>

<div class = "container2">
	<p>Container text</p>
</div>

＆＃13;

当我将鼠标悬停在主容器中的ul或li上时，我需要能够更改类container1和container2。我只知道如何用兄弟容器改变它，但这不是我需要的。

.container-main:hover + .container1 {background:red;}

感谢任何帮助实现这一目标。感谢。

Answer 1

不幸的是，基于你的标记层次结构，你所寻找的东西只能用CSS来实现。你可以用javascript简单地做到这一点。这是一个示例，当您悬停.container1时，会为.container-main ul添加背景颜色：

＆＃13;

const list = document.querySelector('.container-main ul')
const container1 = document.querySelector('.container1')

list.addEventListener('mouseenter', () => container1.classList.add('red'))
list.addEventListener('mouseleave', () => container1.classList.remove('red'))

＆＃13;

.red {
  background-color: red;
}

＆＃13;

<div class = "container-main">
    <div class = "container-inner">
        <ul class = "list">
            <li>Option 1</li>
            <li>Option 2</li>
        </ul>
    </div>
</div>

<div class = "container1">
    <p>Container text</p>
</div>

<div class = "container2">
    <p>Container text</p>
</div>

＆＃13;

Answer 2

这是你想要的吗？ jQuery解决方案：

$( ".container-main li" ).hover(
    function() {
        //do something when hovering 
    }, function() {
        //do something after hovering 
        $(".container1").css("background", "red");
    }
);

Answer 3

感谢大家的回答。我只是不确定它是否可能，我会尝试重新安排我的div heirarchy。我知道它可以用jQuery完成，但我有一个任务，我只需要使用CSS而不需要任何编程语言。
再一次，非常感谢。我对需要改变的内容有了更好的了解。

Answer 4

我不认为css可以做到这一点。你有权访问jquery吗？ https://jsfiddle.net/ifinto/o2gxgz9r/

$(document).ready(function() {
  $(".container-main li").each(function(index) {
    $(this).hover(
      function() {
        div = ".container" + (index + 1);
        console.log("in_" + div);
        $(div).css("background-color", "red")
      },
      function() {
        div = ".container" + (index + 1);
        console.log("out_" + div);
        $(div).css("background-color", "white");
      });
  })

从其他div中的元素修改div

4 个答案: