懸停在div來做出行動，另一個DIV與CSS

我有我的代碼懸停在div來做出行動，另一個DIV與CSS

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

我不需要任何CSS代碼，當我在任何一個懸停，改變他們兩個

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

        } 
        } 
      }

但其不工作:(

來源

2016-04-04 Mohamed Samy

你需要使用JavaScript來做到這一點。你不能使用CSS動畫編輯不同的元素。

我建議使用jQuery做這個要做到這一點，而無需使用任何外部庫，將其嵌套在同一div內，並給予hover和color屬性，將其所有的孩子

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

來源

2016-04-04 18:15:14 MegaXLR

*您不能使用CSS動畫編輯不同的元素* ** **錯誤可能 – LcSalazar

請你告訴我一個例子，而不是我扔的是我錯了。 – MegaXLR

如果我很粗魯，我很抱歉......這不是我的意圖。我的意思是，雖然你的回答是正確的，但是基於元素之間的動作導致視覺變化的交互不限於JS。它也可以通過CSS來完成，而不是在這個問題的特定情況下。 – LcSalazar

的一種方式。

來源

2016-04-04 18:17:50 jxmorris12

正如其他人提到的，這不能完全按照你所問的那樣完成，因爲據我所知，CSS無法修改它們之前的元素。當大數字被徘徊時，您可以更新名稱，但不能反過來。

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

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

正如jxmorris12提到我只是包裹在這些其他元素並懸停在該網址。

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

來源

2016-04-04 19:18:49 zoite

懸停在div來做出行動，另一個DIV與CSS

回答

相關問題