CODEWITHSUNDEEP
htmlcss
Willem van der Veen
Willem van der Veen

Reputation: 36620

CSS onhover the caret part of a full CSS chat bubble

Working on a chat bubble:

.bubble {
    display: inline-block;
    position: relative;
    width: 35px;
    height: 20px;
    padding: 0px;
    background: rgb(219, 218, 218);
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    border:rgb(107, 107, 107) solid 2px;
}

.bubble:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 6px 5px 0;
    border-color: rgb(219, 218, 218)  transparent;
    display: block;
    width: 0;
    z-index: 1;
    margin-left: -5px;
    bottom: -6px;
    left: 43%;
}

.bubble:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 7px 6px 0;
    border-color: rgb(107, 107, 107) transparent;
    display: block;
    width: 0;
    z-index: 0;
    margin-left: -6px;
    bottom: -9px;
    left: 43%;
}

.bubble:hover {
    background-color: red;
}
<div class="bubble"></div>

The onhover is currently not working for the caret part of the chat bubble. The desired result is obviously the whole chat bubble being filled up when there is an onhover event. I tried (not a CSS wiz):

.bubble:hover,  .bubble:hover:before, .bubble:hover:after{
    background-color: red;
}

I also tried a lot of different stuff but it doesn't seem to work. How do I fix this?

Upvotes: 1

Views: 115

Answers (2)

Temani Afif
Temani Afif

Reputation: 273004

Maybe simply this:

.bubble:hover::after {
      border-color: red  transparent;
    }


.bubble {
display: inline-block;
position: relative;
width: 35px;
height: 20px;
padding: 0px;
background: rgb(219, 218, 218);
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
border:rgb(107, 107, 107) solid 2px;
}

.bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 6px 5px 0;
border-color: rgb(219, 218, 218)  transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -5px;
bottom: -6px;
left: 43%;
}

.bubble:before {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 6px 0;
border-color: rgb(107, 107, 107) transparent;
display: block;
width: 0;
z-index: 0;
margin-left: -6px;
bottom: -9px;
left: 43%;
}

.bubble:hover {
    background-color: red;
}
.bubble:hover::after {
  border-color: red  transparent;
}
<div class="bubble"></div>

Upvotes: 1

Sebastian Speitel
Sebastian Speitel

Reputation: 7346

You just have to add

.bubble:hover:after {
  border-color: red transparent;
}

because the small triangle is actually the border of the :after element.

.bubble {
  display: inline-block;
  position: relative;
  width: 35px;
  height: 20px;
  padding: 0px;
  background: rgb(219, 218, 218);
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  border: rgb(107, 107, 107) solid 2px;
}

.bubble:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 6px 5px 0;
  border-color: rgb(219, 218, 218) transparent;
  display: block;
  width: 0;
  z-index: 1;
  margin-left: -5px;
  bottom: -6px;
  left: 43%;
}

.bubble:before {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 7px 6px 0;
  border-color: rgb(107, 107, 107) transparent;
  display: block;
  width: 0;
  z-index: 0;
  margin-left: -6px;
  bottom: -9px;
  left: 43%;
}

.bubble:hover {
  background-color: red;
}

.bubble:hover:after {
  border-color: red transparent;
}
<div class="bubble"></div>

Upvotes: 4

Related Questions