0

I want to change the css styling of my div when the mouse hovers over a button. This is my html code:

  <div class="container">
<button aria-hidden="false"><span aria-hidden="false" style="color:#b8860b">&#9733</span> CLICK ME! <span aria-hidden="false" style="color:#b8860b">&#9733</span></button> 
  </div>

When button isn't clicked When button is hovered

Notice how in the second picture, the div has a border style when the user hovers over the button. How do I get the div to change it's styling when the user hovers over the button?

This is my css file:

.container {
    margin-left: auto;
    margin-right: auto;
    width: 160px;
    background-color: #79CEEB;
    border-radius: 10px;
    height: 50px;
}

.container:hover {
    margin-left: auto;
    margin-right: auto;
    width: 160px;
    background-color: #79CEEB;
    border-radius: 10px;
    height: 50px;
    border-style: inset;
}


button {
    font-size: 18px;
    font-color: #444;
    border: 1px;
    border-color: #777;
    margin-top: 10px;
    margin-left: 10px;
    background: linear-gradient(#ffffff, #abbaab);
}

button:hover {
    font-size: 18px;
    font-color: #444;
    border: 1px;
    border-color: #777;
    margin-top: 10px;
    margin-left: 10px;
    background: linear-gradient(#ffffff, #8D998D);
}

I need this done in only css and html

Justin Case
  • 787
  • 2
  • 15
  • 30

0 Answers0