如何让整个元素改变颜色

In the snippet below, I want the entire div to be highlighted when I hover over it, not individual words. There is probably an easy way to do it, I just can't figure it out at the moment.

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

I've tried putting all the elements separately and together with no luck. If possible, I want to do it using CSS only. I don't want to use JavaScript unless it's absolutely necessary.

我已经尝试将所有元素分开放在一起,没有运气。如果可能的话,我想只使用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 个解决方案

#1

I see that you have separate highlighting rules for .listNumbers, .locations, and .typeOfBuild. If you want all of these to be activated when the user hovers over a .StepList, write the following:

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

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

This is demonstrated in the following snippet. Click on the "Run code snippet" button below to see the result.

这在以下代码段中进行了演示。点击下面的“运行代码段”按钮查看结果。

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

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

I also modified the link styling to make the page look less cluttered.

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

#2

See this fiddle

What i've done is, When you hover on the StepList div, the whole div gets highlighted with a red background

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

I've added this to your CSS

我已将此添加到您的CSS中

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