ホバー、CSS、およびHTMLのテキストを変更

スピーチバブル（すでに作成済み）にマウスを乗せたときにテキストを変更し、マウスが戻ったときにテキストを元に戻したい。私は "ようこそ！"スピーチバブルに設定されたテキストを「スクロールダウン」に変更します。他の問題が...それはそれが難しくなりますので、私はspeechbubble +歓迎のCSS変換を設定していることであるホバー、CSS、およびHTMLのテキストを変更

は、ここに私のコードです：

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

私はいくつかのトリックを試してみました2番目のテキストのdivを追加してCSSのホバーを設定するのと同じように動作しませんでした。だれでも助けてくれますか？ありがとう

出典

2017-05-08 Maëlle Jumel

あなたの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 :)

出典

2017-05-08 11:12:48

ありがとう、これはそれをする正しい方法でない場合、最も簡単でした！ –

あなたはいつでも歓迎です:) –

疑似クラス: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>

出典

2017-05-08 11:05:24

に属性データ - とpseduo要素を使用したサンプルコードは、物事を達成している：

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

出典

2017-05-08 11:09:16

ありがとうございましたが、これは別のバブルを作成するの魔法..です –

は、あなたはそれが別のものを作成する方法ブリーフィングnは私に言うことができますバブル？ –

それは私のコードに含まれていません、つまり、私が望むアニメーションは透明なバブル、他のフォントなどで新しいコードに含まれています。私はおそらく非常に明白ではありません –

これは非常に基本的な方法です。いくつかのタグにテキストを置き、ホバー上にテキストを表示/非表示にします。

また、css3のattrと：after機能を使用することもできます。 :after & :beforeを使用して

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

出典

2017-05-08 11:10:26 Hett

これは、私はそれが何であったかをあなたに示す方法を知らないので、これはURLです：http://typhotoshop.tumblr.com/ あなたはそれを修正できると思いますか？ –

申し訳ありませんが、@MaëlleJumel、私はあなたが正確にしたいものを持っていませんでした。アニメーション（フェードイン/アウト）？またはPSアイコン？ – Hett

ホバー、CSS、およびHTMLのテキストを変更

答えて

関連する問題