懸停動畫顏色開關

-2

我試圖用懸停來實現顏色切換，但是我遇到的問題是文本（在一個範圍內關閉）在列表項中，並且唯一的方法是我可以實現該效果如果我將鼠標懸停在單詞上，但我希望它懸停在整個列表項元素上時切換。懸停動畫顏色開關

span { 
 
color: orange; 
 
transition: all 0.5s ease-in-out; 
 
font-weight: 200; 
 
} 
 

 
ul { 
 
text-align: center; 
 
padding-top: 20px;; 
 
} 
 

 
li { 
 
list-style: none; 
 
display: inline-flex; 
 
padding: 10px 10px; 
 
font-size: 30px; 
 
transition: all 0.5s ease-in-out; 
 
border: 1px solid black; 
 
font-weight: 300; 
 
border-right: 1px; 
 
border-left: 1px; 
 
} 
 

 
#ot { 
 
border-top: 1px solid orange; 
 
border-bottom: 1px; 
 
border-left: 1px solid orange; 
 
} 
 

 
#ob { 
 
border-bottom: 1px solid black; 
 
border-top: 1px; 
 
border-right: 1px solid black; 
 
color: 
 
} 
 

 
#black:hover { 
 
color: black; 
 
} 
 

 
#ot:hover { 
 
border-top: 1px solid black; 
 
border-left: 1px solid black; 
 
color: orange; 
 
} 
 

 
#ob:hover { 
 
border-bottom: 1px solid orange; 
 
border-right: 1px solid orange; 
 
color: orange; 
 
}

<ul> 
 
    <li id="ot">high <span id="black">Park</span></li> 
 
    <li id="ob">the <span id="black">Beach</span></li> 
 
</ul>

來源

2017-05-26 RogerFedFan

您可以針對span而徘徊在#ob，#ot。像：

#ob:hover #black { 
    color: black; 
} 

#ot:hover #black { 
    color: black; 
}

看一看下面的代碼片段：

span { 
 
color: orange; 
 
transition: all 0.5s ease-in-out; 
 
font-weight: 200; 
 
} 
 

 
ul { 
 
text-align: center; 
 
padding-top: 20px;; 
 
} 
 

 
li { 
 
list-style: none; 
 
display: inline-flex; 
 
padding: 10px 10px; 
 
font-size: 30px; 
 
transition: all 0.5s ease-in-out; 
 
border: 1px solid black; 
 
font-weight: 300; 
 
border-right: 1px; 
 
border-left: 1px; 
 
} 
 

 
#ot { 
 
border-top: 1px solid orange; 
 
border-bottom: 1px; 
 
border-left: 1px solid orange; 
 
} 
 

 
#ob { 
 
border-bottom: 1px solid black; 
 
border-top: 1px; 
 
border-right: 1px solid black; 
 
color: 
 
} 
 

 
#black:hover { 
 
color: black; 
 
} 
 

 
#ot:hover { 
 
border-top: 1px solid black; 
 
border-left: 1px solid black; 
 
color: orange; 
 
} 
 

 
#ob:hover { 
 
border-bottom: 1px solid orange; 
 
border-right: 1px solid orange; 
 
color: orange; 
 
} 
 

 
#ob:hover #black { 
 
    color: black; 
 
} 
 

 
#ot:hover #black { 
 
    color: black; 
 
}

<ul> 
 
    <li id="ot">high <span id="black">Park</span></li> 
 
    <li id="ob">the <span id="black">Beach</span></li> 
 
</ul>

希望這是你想達到什麼目的。

來源

2017-05-26 16:24:24

這是什麼意思？

span { 
 
color: orange; 
 
transition: all 0.5s ease-in-out; 
 
font-weight: 200; 
 
} 
 

 
ul { 
 
text-align: center; 
 
padding-top: 20px;; 
 
} 
 

 
li { 
 
list-style: none; 
 
display: inline-flex; 
 
padding: 10px 10px; 
 
font-size: 30px; 
 
transition: all 0.5s ease-in-out; 
 
border: 1px solid black; 
 
font-weight: 300; 
 
border-right: 1px; 
 
border-left: 1px; 
 
} 
 

 
#ot { 
 
border-top: 1px solid orange; 
 
border-bottom: 1px; 
 
border-left: 1px solid orange; 
 
} 
 

 
#ob { 
 
border-bottom: 1px solid black; 
 
border-top: 1px; 
 
border-right: 1px solid black; 
 
color: 
 
} 
 

 
#ot:hover #black, 
 
#ob:hover #black { 
 
color: black; 
 
} 
 

 
#ot:hover { 
 
border-top: 1px solid black; 
 
border-left: 1px solid black; 
 
color: orange; 
 
} 
 

 
#ob:hover { 
 
border-bottom: 1px solid orange; 
 
border-right: 1px solid orange; 
 
color: orange; 
 
}

<ul> 
 
    <li id="ot">high <span id="black">Park</span></li> 
 
    <li id="ob">the <span id="black">Beach</span></li> 
 
</ul>

來源

2017-05-26 16:23:43

懸停動畫顏色開關

回答

相關問題