Change text on hover, CSS and html

Question

I want to change the text when hovering over a speechbubble (already created) and set the text back when the mouse goes back. I have a "Welcome!" text set on the speechbubble and I want it to change to "Scroll down". The other issue is that I have set a css transformation on the speechbubble+welcome so that makes it harder..

Here's my code:

#welcome{
 position:absolute;
 top:50%;
 left:50%;
 width:auto;
 height:auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}


#speechbubble {
margin-left:110px;
width: 230px;
height: 80px;
line-height:80px;
text-align:center;
font-size:15px;
letter-spacing:2px;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
font-family:{select:Title Font};
background: {color:Welcome background};
color:{color:Welcome text};
position: relative;
font-weight:bold;
}
 
#speechbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 18px solid {color:Welcome background};
border-bottom: 13px solid transparent;
}

#welcome:hover #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin-left:120px;
}

#welcome #speechbubble{
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

<div id="welcome">
<div id="speechbubble">Welcome!</div>

I've tried some tricks like adding a div for the second text and setting a css hover but it didn't work.. Can anyone help me? Thanks

Answer 1

You can use pseudo class :after and change its content on hover.

Like this:

#welcome {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

#speechbubble {
  margin-left: 110px;
  width: 230px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 15px;
  letter-spacing: 2px;
  -moz-box-shadow: 5px 5px 5px #888;
  -webkit-box-shadow: 5px 5px 5px #888;
  box-shadow: 5px 5px 5px #888;
  font-family: {
    select: Title Font
  }
  ;
  background: {
    color: Welcome background
  }
  ;
  color: {
    color: Welcome text
  }
  ;
  position: relative;
  font-weight:bold;
}

#speechbubble:after {
  content: "Welcome!";
}

#speechbubble:before {
  position: absolute;
  right: 100%;
  top: 26px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 18px solid {
    color: Welcome background
  }
  ;
  border-bottom: 13px solid transparent;
}

#welcome:hover #speechbubble:after {
  content: "Scroll Down";
}

#welcome:hover #speechbubble {
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  margin-left: 120px;
}

#welcome #speechbubble {
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

<div id="welcome">
  <div id="speechbubble"></div>

Answer 2

Using :after & :before try this, add this to your css:

#welcome:hover #speechbubble:after {
    content: "Scroll Down";
}
#welcome:hover #speechbubble:before {
    content: "";
}
#speechbubble:before {
    content: "Welcome!";
}

then remove this right,top and position from your css:

#speechbubble:before {
  content:"";
  /*position: absolute;*/
  /*right: 100%;*/
  /*top: 26px;*/
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 18px solid {color:Welcome background};
  border-bottom: 13px solid transparent;
}

also remove the word Welcome:

<div id="welcome">
<div id="speechbubble"></div>

now this is the magic of CSS :)