如何使整個元素變色

Question

在下面的代碼段中，我希望將整個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> 

Answer 1

看到這個小提琴

我所做的是，當您將鼠標懸停在StepList div上時，整個div會以紅色背景突出顯示

我已將此添加到您的CSS

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

Answer 2

我看到你有單獨的高亮規則.listNumbers ， .locations和.typeOfBuild 。 如果您希望當用戶將鼠標懸停在.StepList時所有這些都被激活，請編寫以下內容：

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

在以下代碼段中對此進行了演示。 單擊下面的“運行代碼段”按鈕以查看結果。

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

我還修改了鏈接樣式，以使頁面看起來不太混亂。