Question

我有这个示例代码：

HTML：

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

CSS：

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

以下是demo link

现在当我将鼠标悬停在.main上时，.text的样式发生了变化。这是纠正。

现在我想要对这个HTML代码发生这种情况：

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

我希望当我悬停在.main上时，.text的样式想要改变。我试试这个CSS代码：

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

但是不起作用。如何在不使用javascript的情况下执行此操作？

以下是demo link

Answer 1

由于无法选择父元素（当然选择ul＆lt; li等是有用的功能），如果不涉及JavaScript，它将无法工作。

可能有一个解决方案：Example

通过使用由波浪号（〜）表示的一般兄弟选择器完成：

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

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

编辑：相邻兄弟选择器（+）和一般同级选择器（〜）之间的区别在于，如果a + b b直接跟在标记内，则第一个正常工作。第二个不太严格。

Answer 2

您无法在父作用域外定位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'});
});

<强> DEMO

使用CSS将鼠标悬停在父子项外部的另一个标记上时更改标记样式

2 个答案: