Html 使用CSS将鼠标悬停在父子对象之外的另一个标记上时更改标记样式

我有以下示例代码：

HTML:

这是你的电话号码

现在，当我将鼠标悬停在

.main

上时，

.text

的样式发生了变化。 这是更正

现在，我想让这段HTML代码变成这样：

<ul>
    <li class="main">Main</li>
</ul>
<ul>
    <li class="text">Text</li>
</ul>

但是不起作用。 如果不使用javascript，我怎么做呢

---

以下是您不能将CSS作为父范围之外的目标的

。这将涉及JS

jQuery:

var hoverEl = $('.main');
var targetEl = $('.text');

hoverEl.on('mouseenter', function() { 
  targetEl.css({'background-color': 'green'});
});

hoverEl.on('mouseleave', function() { 
  targetEl.css({'background-color': 'none'});
});

---

由于无法选择元素父级（当然，选择ul 但可能有一个解决方案：

通过使用由波浪号（~）指示的常规同级选择器完成：

但是这个解决方案假定元素具有相同的父元素

编辑：

---

相邻同级选择器（+）和常规同级选择器（~）之间的区别在于，如果a+b直接在标记内跟随a，则第一个选择器才有效。第二个没有那么严格。

不幸的是，你想要实现的目标是无法用CSS实现的，因为没有办法选择元素的父元素。第一个示例之所以有效，是因为

+

是相邻的同级选择器。假设这只是一个玩具示例，说明您正在尝试完成的任务，是否可以将类放在

ul

而不是

li

？谢谢，但请参阅我说过的我不想使用JS。（您的演示链接也不正确）

<ul>
    <li class="main">Main</li>
</ul>
<ul>
    <li class="text">Text</li>
</ul>

.main:hover + .text {
    background-color: green;
}

var hoverEl = $('.main');
var targetEl = $('.text');

hoverEl.on('mouseenter', function() { 
  targetEl.css({'background-color': 'green'});
});

hoverEl.on('mouseleave', function() { 
  targetEl.css({'background-color': 'none'});
});

.main:hover ~ ul>.text {
    background-color: green;
}