悬停动画颜色开关

Question

我试图用悬停来实现颜色切换，但我遇到的问题是文本（在一个范围内关闭）是在列表项中，这是我实现效果的唯一方法如果我将鼠标悬停在单词上，但是当我将鼠标悬停在整个列表项元素上时，我希望它切换。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是你的意思吗？

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>

Answer 2

您可以将鼠标悬停在 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>

希望这是你想要实现的目标。