Изменить текст при наведении, CSS и HTML

Я хочу изменить текст при наведении курсора на речевой пузырь (уже создан) и вернуть текст обратно при возврате мыши. У меня есть "Добро пожаловать!" текст установлен на речевом пузыре, и я хочу, чтобы он изменился на "Прокрутить вниз". Другая проблема заключается в том, что я установил преобразование 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, но это не сработало.. Кто-нибудь может мне помочь? Спасибо

Источник

4 ответа

Решение

С помощью :after & :before попробуйте это, добавьте это к вашему CSS:

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

затем удали это right,top а также position из вашего 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;
}

также удалите слово Welcome:

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

теперь это магия CSS:)

Источник

Вы можете использовать псевдо класс :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>

Источник

Вот очень простой способ сделать это. Просто поместите текст в некоторые теги и покажите / скройте их при наведении.

Также вы можете использовать attr и:after функции из css3.

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

Источник

Вот пример кода, использующего псевдо-элементы с атрибутами данных для достижения цели:

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

Источник
Другие вопросы по тегам