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

Question

I'm trying to make a button that has several effects and one of them is to change the color of the text in the button on hover. How do I make sure that when you hover over one of the text elements, the buttons are highlighted in white all together? And second small question why the smooth transition from background-gradient to another background-gradient doesn't work?

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

score 1 · Accepted Answer · answered Sep 17 '20 at 12:03

try this,

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

instead of

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

because you hover the <a> tag to change the color of all span having id highlight

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

Thank you, it's works. Can you also tell me why the smooth transition from background-gradient doesn't work? — WebSS, Sep 17 '20 at 13:11
This might helpful https://keithjgrant.com/posts/2017/07/transitioning-gradients/ and this https://css-tricks.com/transitioning-gradients/ — Rayees AC, Sep 17 '20 at 17:00

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

1 Answers1