当鼠标悬停在卡片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>
parentelement > element
选择器用于选择具有特定父元素的元素。例如,#card > p
将选择id
为 card 的div
中的所有p
元素。注意: 不是直接作为指定父级的子元素的元素不会被选择。 - rhitz