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

问题

How can I change the style of another element when a link is hovered - without 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>

I want to change the opacity of the text in main when the link is hovered.

Is it possible?

EDIT

I tried with a sibling:

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>

But still does not work...

回答1:

It is not possible to use + or ~ sibling selectors, becouse <a> and <main> elements are not siblings. Thus you could use JavaScript. For example it is possible using by fadeTo() within hover() method:

$("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>

In your EDIT section you should use a:hover~ul selector instead of a:hover ul.

回答2:

It's possible but the layout must be situated differently due to CSS cascading behavior. Whatever you hover over (call it the trigger) and whatever is fading because of the hover (call it target) must have specific positions in order for it to work.

Trigger -

Can be before target as an "older" sibling.

Can be an ancestor of target or a sibling of an ancestor of target.

Demo

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>

回答3:

In general, this type of problem is solved using combinators.

In this specific case, you need a parent combinator, which does not exist in CSS, so it is impossible without restructuring the HTML (e.g. to make the <main> a sibling of the <a>).

回答4:

Really interesting question.

You can try out the following code:

.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>

Take a look at this link, it explains about the tilde selector in CSS:

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

I personally thought this was not possible. I learnt something new today! :D

来源：https://stackoverflow.com/questions/45284520/css-change-the-style-of-another-element-when-a-link-is-hovered

标签

html

css

hover

opacity