Hover auf div Aktion zu einem anderen div mit CSS machen

Question

ich habe meinen Code

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

ich brauche jeden CSS-Code, dass, wenn ich auf einem schweben, sie beide

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

        } 
        } 
      } 

ändern, aber seine nicht :(

Answer 1

arbeiten Sie müssen JavaScript verwenden müssen, dies zu tun. Sie können nicht verschiedene Elemente mit CSS-Animation bearbeiten.

würde ich dieses

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

Answer 2

Eine Möglichkeit, dies zu tun mit jQuery und empfehlen alle außerhalb Bibliotheken ohne zu nisten sie innerhalb der gleichen div und geben die hover und color Eigenschaften für alle seine Kinder sein würde.

Answer 3

Wie andere erwähnten, kann dies nicht genau so ausgeführt werden, wie Sie es wünschen, da CSS Elemente, die ihnen vorausgehen, soweit ich weiß, nicht modifizieren kann. Sie könnten den Namen aktualisieren, wenn die große Zahl schwebt, aber nicht umgekehrt.

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

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

Wie jxmorris12 erwähnte ich diese in einem anderen Element nur wickeln würde und an diesem statt schweben.

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

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