当鼠标悬停在 div 元素上时，改变所有 p 元素的颜色。

Question

当鼠标悬停在 div 元素上时，改变所有 p 元素的颜色。

3

当鼠标悬停在卡片div上时，我想改变所有p元素的颜色。但是在这段代码中，所有的p元素并没有同时改变。我该怎么做？

<html> <style>
  #card {
    width: 370px;
    height: 570px;
    background-color:  white;
    position: absolute;
    top: 1390px;
    left: 200px;
        

}
#card:hover{
    background-color: #63C2A1;
    display: block;
}
#card p.name {
    font-family: DOSIS;
    font-weight: light;
    font-size: 22px;
    position: absolute;
    left: 139px;
    top: 210px;
color:#1F2B40;
    display: block;
   
}
#card p.add {
    font-family: Oswald;
    font-weight: lighter;
    position: absolute;
    left: 120px;
    top: 247px;
    font-size: 29px;
    color: #434445;
    line-height: 50%;
display: block;
}
#card p.info {
    font-family: Open Sans;
    font-weight: lighter;
    color:#434445;
    position: absolute;
    top: 260px;
    padding: 70px;
    text-align: center;
    display: block;
}
        #card p {
      display:  inline-block;
          }
#card p:hover{
    color: white;
} </style>
     <div id="card">
           

               <p  class="name" >  
               Sam Fellig </p><p  class="add">New York,US</p>
            <p class="info"   > From a non-technical guy with an idea to  building one of 
            TIME's Top 50 sites of 2013, Sam Fellig's story is nothing less  than 
            magical. But the founder of Outgrow.me says anyone can learn, as long as
              they stay positive.</p>
         
          </div>
    <html>

- Mahmud hasan

2个回答

0

不确定这是否是您的解决方案，但请查看Fiddle。

您可以看到两个解决方案：

纯CSS
CSS + JS

1. 纯CSS

添加此规则：

#card:hover *,
p:hover {
  color: white !important; /* important is not so good */
}

2. css + js

注意：要运行带有 JS 的 fiddle，请取消注释 JS 面板中的最后一行。

我刚刚添加了一个 CSS 规则：

#card p:hover,
#card .with-bckg {
   color: white !important; 
}

JS部分非常简单：

选择卡片
选择卡片的子元素p
应用方法，同时在悬停时（添加类）和退出时（删除先前添加的类）；

$("#card").hover(onHover, onOut);

希望这有所帮助。敬礼

- ollie314

我只想添加 CSS 文件，而不是 JS 文件。 - Mahmud hasan

谢谢您的评论！ - Mahmud hasan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rhitz · Accepted Answer

使用元素 > 元素 CSS 选择器来选择具有特定父级的元素。 代码：与其使用

#card p:hover{
    color: white;
}

Do:

#card:hover > p{
     color: white;
}

在父元素

上使用hover，只有所以

中的p元素的颜色才会变成白色。

请查看Fiddle。

#card {
  width: 370px;
  height: 570px;
  background-color: white;
  position: absolute;
  top: 0px;
  left: 0px;
}
#card:hover {
  background-color: #63C2A1;
  display: block;
}
#card p.name {
  font-family: DOSIS;
  font-weight: light;
  font-size: 22px;
  position: absolute;
  left: 139px;
  top: 210px;
  color: #1F2B40;
  display: block;
}
#card p.add {
  font-family: Oswald;
  font-weight: lighter;
  position: absolute;
  left: 120px;
  top: 247px;
  font-size: 29px;
  color: #434445;
  line-height: 50%;
  display: block;
}
#card p.info {
  font-family: Open Sans;
  font-weight: lighter;
  color: #434445;
  position: absolute;
  top: 260px;
  padding: 70px;
  text-align: center;
  display: block;
}
#card p {
  display: inline-block;
}
#card:hover > p {
  color: white;
}

<body>

  <div id="card">
    <p class="name">
      Sam Fellig</p>
    <p class="add">New York,US</p>
    <p class="info">From a non-technical guy with an idea to building one of TIME's Top 50 sites of 2013, Sam Fellig's story is nothing less than magical. But the founder of Outgrow.me says anyone can learn, as long as they stay positive.</p>
  </div>
</body>