将鼠标悬停在其中一个元素上时如何更改其他元素的样式？

Question

我正在尝试制作一个具有多种效果的按钮，其中之一是在悬停时更改按钮中文本的颜色。我如何确保当您将鼠标悬停在其中一个文本元素上时，这些按钮一起以白色突出显示？第二个小问题为什么从 background-gradient 到另一个 background-gradient 的平滑过渡不起作用？

    
.myButton {
    transition: all 0.5s ease;
/*  background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%); */

    border-radius:16px;
    display:inline-block;
    cursor:pointer;
    color: darkorange;
    font-family:Arial;
    font-size:100%;
    font-weight:bold;
    padding:0px 12px 0px 4px;
    text-decoration:none;
    text-indent: 6px;
    background-image: -webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background-image: -moz-linear-gradient(top,#ededed 5%, #dfdfdf 100%);
    background-image: -ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background-image: -o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background-image: linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
    border:1px solid #dcdcdc;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    
}

a.myButton:hover  span#highlight {
    
    color: white;
}

a.myButton span {
    
        color: darkorange;
}

#highlight {
    
        color: darkorange;
}


.myButton:hover {
color: white;
   background-image: -webkit-linear-gradient(top, #3D94F6, #1E62D0);
   background-image: -moz-linear-gradient(top, #3D94F6, #1E62D0);
   background-image: -ms-linear-gradient(top, #3D94F6, #1E62D0);
   background-image: -o-linear-gradient(top, #3D94F6, #1E62D0);
   background-image: linear-gradient(to bottom, #3D94F6, #1E62D0);
 
    
    
/*  background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
    background-color:#6c7c7c; */
      box-shadow: 1px 1px 20px 0px darkorange;
      

      
}

<a href="/" style="float:center; padding-bottom:  7px;" class="myButton">
  <span id="highlight" class="fas fa-angle-right"> ++ </span>
  <span id="highlight" style="padding-bottom: 7px;">CLICK ME!</span>
  <span id="highlight" style="position: relative; font-size: 180%;top: 3px;" class="fab fa-cloudversify"> ++ </span>
</a>

Answer 1

试试这个，

a.myButton:hover span#highlight {
    color: white;
}

而不是

a.myButton span:hover  #highlight {
    color: white;
}

因为您将鼠标悬停在 <a> 标签上以更改具有 id highlight

的所有 span 的颜色

.myButton {
transition: all 0.5s ease;

    background-color:#768d87;
    border-radius:16px;
    border:1px solid #566963;
    display:inline-block;
    cursor:pointer;
    color: darkorange;
    font-family:Arial;
    font-size:100%;
    font-weight:bold;
    padding:0px 12px 0px 4px;
    text-decoration:none;
    text-indent: 6px;
  box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
  font-family: Verdana;
  border: solid #gray 1px;
  border:1px solid #dcdcdc;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  text-align: center;
    
}

a.myButton:hover span#highlight {
    color: white;
}

a.myButton span {
        color: darkorange;
}

#highlight {
        color: darkorange;
}

.myButton:hover {
color: white;
    background:linear-gradient(to bottom, #ededed 5%, #006AFF 100%);
    box-shadow: 1px 1px 20px 0px darkorange;
}

<a href="/" style="float:center; padding-bottom:  7px;" class="myButton"><span  id="highlight" class="fas fa-angle-right"> ++ </span> <span id="highlight"style="padding-bottom: 7px;">CLICK ME!</span>
 
 <span id="highlight" style="position: relative; font-size: 180%;top: 3px;" class="fab fa-cloudversify"> ++ </span></a>

将鼠标悬停在其中一个元素上时如何更改其他元素的样式？

How to change the style of other elements when hovering over one of them?

css

hover