如何让整个元素改变颜色

时间:2015-05-05 17:41:32

标签: html css

在下面的代码段中,我希望将鼠标悬停在整个div上时突出显示整个div,而不是单个单词。可能有一种简单的方法,我现在无法理解。

我尝试将所有元素分开放在一起,没有运气。如果可能的话,我想只使用CSS。除非绝对必要,否则我不想使用JavaScript。

.StepList { 
  margin: 20px 0 10px;
}  
.stepBox { 
  white-space: nowrap;
  padding: 0px 20px;
  font-size: 110%;
}
.listNumbers { 
  height: 30px;
  width: 30px;
  line-height: 30px;
  -moz-border-radius: 15px; /* or 50% */
  border-radius: 15px; /* or 50% */
  background-color: #dedede;
  color: white;
  text-align: center;
  display: inline-block;
}
.locations {
  text-transform: uppercase;
  color: #dedede;
}
.typeOfBuild {
  text-transform: uppercase;
  color: #dedede;
}
/*hover for step list*/
a.stepBox:hover .StepList:hover, .stepBox:hover, .locations:hover, .typeOfBuild:hover {
  color: #6495a9;
} 
.listNumbers:hover {
  background-color: #dedede;
  color: #6495a9;
}
<div class = "StepList">
  <span class ="stepBox"> 
    <span class = "activeAccommodation">
      <a href ="#">
        <span class ="listNumbers"> 1 </span>
        <span class="locations">location </span>
        <span class="typeOfBuild">Accommodation </span>
      </a>
    </span>
    </span>
    <span class = "stepBox">
      <span class = "activeActivities">
      <a href ="#">
        <span class ="listNumbers">2</span>
        <span class="locations">location</span>
        <span class="typeOfBuild">Activities</span>
      </a>
    </span>
    </span>
      <span class = "stepBox">
      <span class = "activeRestaurant">
      <a href ="#">
        <span class ="listNumbers">3</span>
        <span class="locations">location</span>
        <span class="typeOfBuild">Restaurants</span>
      </a>
      </span>
    </span>
    <span class = "stepBox">
      <span class = "activeNighlife">
      <a href ="#">
        <span class ="listNumbers">4</span>
        <span class="locations">location</span>
        <span class="typeOfBuild">Nightlife </span>
      </a>
    </span>
  </span>
</div>

2 个答案:

答案 0 :(得分:0)

请参阅此fiddle

我所做的是,当你将鼠标悬停在StepList div上时,整个div会以红色背景突出显示

我已将此添加到您的CSS

.StepList:hover {
    background-color:red;
}

答案 1 :(得分:0)

我发现您对.listNumbers.locations.typeOfBuild有单独的突出显示规则。如果您希望在用户将鼠标悬停在.StepList上时激活所有这些内容,请写下以下内容:

.StepList:hover .listNumbers, .StepList:hover .locations, .StepList:hover .typeOfBuild {
    color: #6495a9;   
}

以下代码段演示了这一点。点击&#34;运行代码段&#34;按钮下方查看结果。

&#13;
&#13;
.StepList {
  margin: 20px 0 10px;
}		
.stepBox {
  white-space: nowrap;
  padding: 0px 20px;
  font-size: 110%;
}	
.listNumbers {
  height: 30px;
  width: 30px;
  line-height: 30px;
  -moz-border-radius: 15px; /* or 50% */
  border-radius: 15px; /* or 50% */
  background-color: #dedede;
  color: white;
  text-align: center;
  display: inline-block;
}
.locations {
  text-transform: uppercase;
  color: #dedede;
}
.typeOfBuild {
  text-transform: uppercase;
  color: #dedede;
}

/* link styling */
a {
  text-decoration: none;
}
a:hover {
  background: #ffc;
}

/* container hover */
.StepList:hover .listNumbers, .StepList:hover .locations, .StepList:hover .typeOfBuild {
  color: #6495a9;
}
&#13;
<div class = "StepList">
  <span class ="stepBox"> 
    <span class = "activeAccommodation">
      <a href ="#">
        <span class ="listNumbers"> 1 </span>
        <span class="locations">location </span>
        <span class="typeOfBuild">Accommodation </span>
      </a>
    </span>
  </span>
  <span class = "stepBox">                  
    <span class = "activeActivities">
      <a href ="#">
        <span class ="listNumbers">2</span>
        <span class="locations">location</span>
        <span class="typeOfBuild">Activities</span>
      </a>                  
    </span>
  </span>
  <span class = "stepBox">
    <span class = "activeRestaurant">
      <a href ="#">
        <span class ="listNumbers">3</span>
        <span class="locations">location</span>
        <span class="typeOfBuild">Restaurants</span>
      </a>
    </span>
  </span>
  <span class = "stepBox">
    <span class = "activeNighlife">
      <a href ="#">
        <span class ="listNumbers">4</span>
        <span class="locations">location</span>
        <span class="typeOfBuild">Nightlife </span>
      </a>                  
    </span>
  </span>
</div>
&#13;
&#13;
&#13;

我还修改了链接样式,使页面看起来不那么杂乱。