Question

如果没有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>

我希望在链接悬停时更改opacity中文字的main。

有可能吗？

修改

我试过一个兄弟姐妹：

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

这是可能的，但由于CSS级联行为，布局必须位于不同的位置。无论你将鼠标悬停在什么地方（称之为触发器），由于悬停（称之为目标），任何褪色都必须具有特定的位置才能使其工作。

触发 -

可以在目标之前作为“老”兄弟。

或

可以是目标的祖先或目标祖先的兄弟。

演示

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 2

通常，使用combinators解决此类问题。

在这种特定情况下，您需要一个 parent combinator ，这在CSS中不存在，因此如果不重构HTML（例如，使coins= game.add.group();// group of many coins coins.enableBody = true; for (var i = 0; i<12; i++){ var coin = coins.create(i*70,0, 'coin');// var individual coin coin.body.gravity.y = 6; coin.body.bounce.y = 0.7 +Math.random()*0.2; }成为<main>的{{3}}。

Answer 3

无法使用+或~兄弟选择器，因为<a>和<main>元素不是兄弟姐妹。因此，您可以使用JavaScript。例如，可以在fadeTo()方法中使用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>

在编辑部分，您应该使用a:hover~ul选择器而不是a:hover ul。

Answer 4

非常有趣的问题。

您可以尝试以下代码：

var schedule = this.firebase.database.list('/schedule');

this.firebase.database.list('/schedule',{query: {orderByChild: 'user_day',equalTo: this.currentUser.uid+'_'+day }})
.subscribe(data => {
    if(data.length == 0){
        //insert
        schedule.push({from : from, to : to, user_id : this.currentUser.uid, user_day: this.currentUser.uid+'_'+day,day : day});
    }else{
        //update
        schedule.update(data[0].$key,{from : from, to : to});
        console.log(from,to);
    }
});

.trigger{
	color: black;
}

div:hover ~ .trigger{
	color: orange;
}

div{
	display: inline-block;
	border: 1px solid green;
	border-radius: 10px;
	padding: 5px;
	width: auto;
}

看一下这个链接，它解释了CSS中的波形符选择器：

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

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

CSS - 当链接悬停时改变另一个元素的样式？

4 个答案:

演示