更改懸停，CSS和html上的文本

我想在鼠標懸停在speechbubble（已創建）上時更改文本，並在鼠標返回時設置文本。我有一個「歡迎！」在speechbubble上設置的文本，我希望它更改爲「向下滾動」。另一個問題是，我已經設置在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>

我已經嘗試了一些技巧就像爲第二個文本添加一個div並設置一個css懸停，但它沒有工作..任何人都可以幫助我？謝謝

來源

2017-05-08 Maëlle Jumel

使用: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; 
}

也刪除單詞歡迎：

<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元件與DATA-屬性實現的東西的示例代碼：

#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

謝謝你，但這個創造另一個泡沫的魔術.. –

你能告訴我ñ介紹如何創建另一個泡沫？ –

它不包括在我的代碼中，這意味着它做了我想要的動畫，但在透明氣泡，其他字體等新代碼。我可能不是很清楚對不起 –

下面是非常基本的方法。只需將文本放在一些標籤中，並在懸停時顯示/隱藏它們即可。

此外，您可以使用atss和：後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>

來源

2017-05-08 11:10:26 Hett

所以這工作，但只是部分..我不知道如何告訴你它做了什麼，所以這是網址：http://typhotoshop.tumblr.com/ 你認爲你可以修復它嗎？ –

對不起，@MaëlleJumel，但我沒有得到你想要的東西。動畫（淡入/淡出）？或PS圖標？ – Hett

更改懸停，CSS和html上的文本

回答

相關問題