Beniamino_Baggins Beniamino_Baggins - 4 months ago 8
HTML Question

css style whole element when hovering on its "after"

I have this button/speech bubble:

enter image description here

Code:

<div value="GO" id="go-div" class="bubble">
<input type="submit" value="GO" id="go-button" style=" position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;" data-target="#search-results-page">
</div>


I have this styling, to change the little arrow colour, when hovering on the button:

#go-div.bubble:hover:after {
border-color: transparent #ffffff;
}


Which gives this effect when hovering over the bubble:

enter image description here

However, when I hover over the little arrow it doesn't cause the whole button to change color:

enter image description here

What is the css that selects the little arrow (
.bubble:after
) hover and effects the whole button (
.button
) to turn it white?

Here is the jsfiddle

Answer

You can apply your :hover style to the parent element and since :after is a child when you hover on the arrow it will trigger hover on parent.

#go-div:hover #go-button{
  background: white;
}

.bubble 
{
position: relative;
width: 250px;
height: 65px;
padding: 0px;
background: #ff8282;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 0 15px 24px;
border-color: transparent #ff8282;
display: block;
width: 0;
z-index: 1;
margin-top: -15px;
right: -24px;
top: 50%;
}

#go-div.bubble:hover:after {
      border-color: transparent  #ffffff;
}

#go-button:hover {
  text-decoration: none;
  background-color:white;
  color: brand-red
}

#go-button,
#go-div{
  font: 200 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  border-radius: 6px;
  height: 64px;
  text-decoration: none;
  width: 100%;
  background-color: #ff8282;
  padding: 12px;
  border: 0px solid #fff;
  color: #fff;
  cursor: pointer;
}

#go-div:hover #go-button{
  background: white;
}
<div value="GO" id="go-div" class="bubble">
   <input type="submit" value="GO" id="go-button" style="    position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;" data-target="#search-results-page">
</div>