Question

我想在卡片div悬停时更改所有p元素的颜色。但是在这段代码中，所有p元素一次不会改变。我怎么能这样做？

＆＃13;

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

＆＃13;

Answer 1

使用element > element CSS选择器选择具有特定父级的元素。

代码：而不是

#card p:hover{
    color: white;
}

执行：

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

在父Hover的{{1}}上，只有div的所有p元素都会将其颜色更改为白色。

查看Fiddle。

div

#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;
}

Answer 2

不确定，这是您的解决方案，但请参阅此Fiddle。

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

pure css
css + js

1。纯css

添加此规则：

> echo $PATH                                                                                                                                                                                
/path/to/home/.rbenv/shims: ...
> which gem                                                                                                                                                                                 
/path/to/home/.rbenv/shims/gem
> gem environment                                                                                                                                                                           
  ...
  - SHELL PATH:
     - /path/to/home/.rbenv/versions/2.1.3/bin
     - /opt/local/bin                <- contains system ruby 2.1.7 
     - /path/to/home/.rbenv/shims    <- $PATH starts here
     - ... standard $PATH continues

2。 css + js

注意：要使用js运行小提琴，请取消注释js面板中的最后一行。

我刚刚添加了一条css规则：

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

js部分非常简单：

选择卡
为卡片选择p child
在悬停（添加一个类）和开出时应用一个方法（删除以前添加的类）;

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

希望它有用。此致

当它的div被悬停时，改变所有p元素的颜色

2 个答案:

1。纯css

2。 css + js