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">★</span> CLICK ME! <span aria-hidden="false" style="color:#b8860b">★</span></button>
</div>
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