CSS

Question

当悬停 link 时如何更改另一个元素的样式 - 没有 jQuery/ JavaScript？

ul>li>a:hover main {
  opacity: 0.1;
}

main p {
  font-size: 200px;
}

<header>
  <ul>
    <li><a href="#">Hover me</a></li>
  </ul>
</header>

<main>
  <p>Hello World!</p>
</main>

我想在悬停 link 时更改 main 中文本的 opacity。

可能吗？

编辑

我和一个兄弟姐妹试过：

a:hover ul {
  opacity: 0.5;
}

<header>
  <ul>
    <li><a href="#">Hover me</a><span></span>
      <ul>
        <li>Child 1</li>
        <li>Child 2</li>
        <li>Child 3</li>
      </ul>
    </li>
  </ul>
</header>

但是还是不行...

Answer 1

一般来说，这类问题是用combinators解决的。

在这种特定情况下，您需要一个 parent combinator, which does not exist in CSS, so it is impossible without restructuring the HTML (e.g. to make the <main> a sibling 的 <a>)。

Answer 2

无法使用 + 或 ~ 兄弟选择器，因为 <a> 和 <main> 元素不是兄弟。因此你可以使用 JavaScript。例如，可以使用 fadeTo() within hover() 方法：

$("a[data-opacity-target]").hover(function() {
  var selector = $(this).data("opacity-target");
  $(selector).fadeTo(500, 0.1);
}, function() {
  var selector = $(this).data("opacity-target");
  $(selector).fadeTo(500, 1);
});

main p {
  font-size: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <ul>
    <li><a href="#" data-opacity-target="main">Hover me</a></li>
  </ul>
</header>
<main>
  <p>Hello World!</p>
</main>

在你的 EDIT 部分你应该使用 a:hover~ul 选择器而不是 a:hover ul.

Answer 3

这是可能的，但由于 CSS 级联行为，布局必须位于不同的位置。无论你将鼠标悬停在什么地方（称之为触发器）以及任何因为悬停而消失的东西（称之为目标）都必须有特定的位置才能起作用。

Trigger -

可以作为“年长”兄弟姐妹出现在目标之前。

或

可以是 target 的祖先或 target 祖先的兄弟姐妹。

演示

a {
  border: 3px dotted blue;
  padding: 0 5px;
  color: #000;
  text-decoration: none;
  display: block;
}

a.aunt {
  border-color: red;
  margin: 10px 0;
}

a.aunt:hover+main p {
  opacity: 0.1;
  transition: 1s;
}

a.brother:hover+p {
  color: red;
}

a.sister:hover~p {
  color: blue;
}

main.mom {
  border: 5px dashed tomato;
}

main.mom p {
  opacity: 1;
  font-size: 50px;
  margin-top: 10px;
  transition: 1s;
  border: 3px solid red;
}

main.mom:hover p {
  font-size: 100px;
}

b {
  font-size: 25px
}

<a href='#/' class='aunt'>Aunt - Older sibling of an ancestor of the target</a>


<main class='mom'>
  <a href='#/' class='sister'>Big Sister - Sibling to target with <br>sibling combinator: <b>~</b></a><br><br>

  <a href='#/' class='brother'>Big Brother - Adjacent Sibling to target with <br>adjacent sibling combinator: <b>+</b></a>

  <p>Target</p>
  <a href='#/' class='brother'>Little Brother - Cannot influence target when hovered on.</a>
  <br> Mom - hovering over affects all descendants<br>(i.e. all siblings and siblings' and target's descendants)<br>
</main>

<a href='#/' class='aunt'>Aunt - This is after target's ancestor so it cannot influence target</a>

Answer 4

非常有趣的问题。

您可以试试下面的代码：

.trigger{
 color: black;
}

div:hover ~ .trigger{
 color: orange;
}

div{
 display: inline-block;
 border: 1px solid green;
 border-radius: 10px;
 padding: 5px;
 width: auto;
}

<!DOCTYPE html>
<html>
<head>
 <title>Pure CSS event handling</title>
</head>
<body>
 <div>Hover over me for pure CSS events</div>
 <p class="trigger">Hey Pikachu!</p>
</body>
</html>

看看这个 link，它解释了 CSS 中的波浪号选择器：

what-does-the-tilde-squiggle-twiddle-css-selector-mean

我个人认为这是不可能的。我今天学到了新东西！ :D

CSS - 当悬停 link 时更改另一个元素的样式？

CSS - change the style of another element when a link is hovered?

html

hover

opacity

演示