悬停在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

回答

相关问题