悬停时更改文本，CSS 和 html

Question

我想在将鼠标悬停在语音气泡（已创建）上时更改文本，并在鼠标返回时将文本设置回去。我在 speechbubble 上设置了 "Welcome!" 文本，我希望它更改为 "Scroll down"。另一个问题是我在 speechbubble+welcome 上设置了一个 css 转换，这样就更难了..

这是我的代码：

#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>

我已经尝试了一些技巧，例如为第二个文本添加 div 并设置 css 悬停，但它没有用。任何人都可以帮助我吗？谢谢

Answer 1

您可以使用伪 class :after 并在悬停时更改其内容。

像这样：

#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

Here is an example code using pseduo elements with data- attributes to achieve the things:

#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%);
}

body {
  background: black;
}


/* .button */

#speechbubble {
  display: inline-block;
  position: relative;
  margin: 1em;
  padding: 0.67em;
  border: 2px solid #FFF;
  overflow: hidden;
  text-decoration: none;
  font-size: 2em;
  outline: none;
  color: #FFF;
  background: transparent;
  font-family: 'raleway', sans-serif;
}

#speechbubble span {
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

#speechbubble:before {
  content: '';
  position: absolute;
  top: 0.67em;
  left: 0;
  width: 100%;
  text-align: center;
  opacity: 0;
  -webkit-transition: .4s, opacity .6s;
  -moz-transition: .4s, opacity .6s;
  -o-transition: .4s, opacity .6s;
  transition: .4s, opacity .6s;
}


/* :before */

#speechbubble:before {
  content: attr(data-hover);
  -webkit-transform: translate(-150%, 0);
  -moz-transform: translate(-150%, 0);
  -ms-transform: translate(-150%, 0);
  -o-transform: translate(-150%, 0);
  transform: translate(-150%, 0);
}


/* Span on :hover and :active */

#speechbubble:hover span {
  opacity: 0;
  -webkit-transform: scale(0.3);
  -moz-transform: scale(0.3);
  -ms-transform: scale(0.3);
  -o-transform: scale(0.3);
  transform: scale(0.3);
}


/*  
    We show :before pseudo-element on :hover 
    
*/

#speechbubble:hover:before {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition-delay: .4s;
  -moz-transition-delay: .4s;
  -o-transition-delay: .4s;
  transition-delay: .4s;
}

<div id="welcome">
  <div id="speechbubble" data-hover="Scroll Down"><span>Welcome!</span></div>

</div>

Answer 3

这是非常基本的方法。只需将文本放在一些标签中，然后 show/hide 将它们悬停。

您还可以使用 css3.

中的 attr 和 :after 功能

#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 .hover_on {
  display: none;
}
#welcome #speechbubble .hover_off {
  display: inline-block;
}

#welcome:hover #speechbubble .hover_on {
  display: inline-block;
}
#welcome:hover #speechbubble .hover_off {
  display: none;
}

#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"><p class="hover_off">Welcome!</p><p class="hover_on">Scroll down!</p></div>

Answer 4

使用 :after 和 :before 试试这个，将其添加到您的 css:

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

然后从您的 css 中删除此 right、top 和 position:

#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;
}

同时删除欢迎:

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

这就是 CSS 的魔力:)

悬停时更改文本，CSS 和 html

Change text on hover, CSS and html

html

css

text

hover

textchanged