Question

i have my code

<p class="big-number">21</p>
<p class="name">Johnny Carr</p>

i need any css code that when i hover on any one , change them both

.big-number {
        font-family: @Roboto;
        font-size: 24px;
        font-weight: 500;
        color: #2c97de;
        text-align: center;
             &:hover {
             color: #1b71aa;
             cursor: pointer;
              + p.name{
                  color: #1b71aa;

                     }
                   }
            }

but its not working :(

Answer 1

You'll need to use JavaScript to do this. You can't edit different elements using CSS animation.

I'd recommend using jQuery and do this

$(".big-number").hover(function() {
    $("p.name").css("color", "#1b71aa");
});

Answer 2

正如其他人提到的，这可以完全按照你的要求完成，因为据我所知，CSS无法修改它们之前的元素。你可以在大数字悬停时更新名称，但不是相反。

＆＃13;

.big-number:hover ~ .name {
  font-weight: bold;
}

＆＃13;

<p class="big-number">21</p>
<p class="name">Johnny Carr</p>

＆＃13;

正如jxmorris12所提到的那样，我只是将它们包装在另一个元素中并将其悬停在该元素上。

＆＃13;

.selected:hover {
  font-weight: bold;
}

＆＃13;

<section class='selected'>
  <p class="big-number">21</p>
  <p class="name">Johnny Carr</p>
</section>

<section class='selected'>
  <p class="big-number">21</p>
  <p class="name">Johnny Carr</p>
</section>

＆＃13;

Answer 3

One way to do this without using any outside libraries would be to nest them within the same div and give the hover and color properties to all its children.

Hover on div to make action to another div with css

3 个答案: