更改懸停與CSS文本，還風格的文字

一直在這個問題上停留了很長時間，嘗試去谷歌第一頁上的每一個鏈接搜索「懸停後的CSS更改文字」，但沒有運氣。更改懸停與CSS文本，還風格的文字

我有一個div中間的文本，該文本有它自己的div，它是造型文本和決定文本位置。

但是，我希望當您將鼠標懸停在它所在的div上並使用CSS時，文本會發生變化。

我已經閱讀過內容/之前的指南：之前/之後，但它讓它變得更加混亂。

下面是當前的代碼，做當前的作業，精細：

/* Circles in the services section*/ 
.servicecircle { 
width: 204px; 
height: 204px; 
background-image: url('/anonymous/for/reasons.png'); 
display: inline-block; 
background-repeat: no-repeat; 
margin-left: 22px; 
margin-right: 22px; 
/* Button transition*/ 
-o-transition:.5s; 
-ms-transition:.5s; 
-moz-transition:.5s; 
-webkit-transition:.5s; 
transition:.5s; 
} 

.servicecircle:hover{ 
background-image: url('/anonymous/for/reasons.png'); 
cursor: pointer; 
}

我還是設法獲取文本與下面的代碼改變，但是div的已不再正確對齊和我到處找，但沒有發現在內容中對文本進行造型的方式。

/* Circles in the services section*/ 
.servicecircle:after { 
width: 204px; 
height: 204px; 
background-image: url('/anonymous/for/reasons.png'); 
display: inline-block; 
background-repeat: no-repeat; 
margin-left: 22px; 
margin-right: 22px; 
/* Button transition*/ 
-o-transition:.5s; 
-ms-transition:.5s; 
-moz-transition:.5s; 
-webkit-transition:.5s; 
transition:.5s; 
/* Content is inserted */ 
content: 'Service 1'; 
} 

/* Changes content on hover */ 
.servicecircle:hover:after{ 
background-image: url('/anonymous/for/reasons.png'); 
cursor: pointer; 
content: 'Service Description..'; 
}

這整個事情被插入到頁面

<div class="servicecircle">         
</div>

是什麼，我甚至可能CSS後我？

P.S 如果可能的話，一個好的指南的鏈接會很好，我還是比較新的CSS，所以這可能有點出我的聯盟。我讀過的所有指南都使用了我以前從未見過的代碼

來源

2016-10-18 Ben

看看這個小提琴https://jsfiddle.net/rejx1g5s/ –

的可能的複製[我怎麼能代替CSS文本？]（http://stackoverflow.com/questions/7896402/how-can-i-replace-text-with-css） –

@GermanoPlebani謝謝你的工作。不過，我想學習如何自己做，我很努力地看到爲什麼我需要兩次CSS div，包括和不包括： – Ben

您可以使用CSS來做到這一點。

<html> 
 
<head> 
 
<style type="text/css"> 
 
    div#line1 span#a { 
 
     display:inline; 
 
    } 
 
    div#line1:hover span#a { 
 
     display:none; 
 
    } 
 
    div#line1 span#b { 
 
     display:none; 
 
    } 
 
    div#line1:hover span#b { 
 
     display:inline; 
 
    } 
 
</style> 
 

 
</head> 
 
<body> 
 
<div id="line1"> 
 
    <table border="1"> 
 
     <tr> 
 
      <td> 
 
       <span id="a">this is sick</span><span id="b">this is awesome</span> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
</div> 
 
</body> 
 
</html>

<div id="line1"> 
 
    <table border="1"> 
 
     <tr> 
 
      <td><span id="a">this is sick</span><span id="b">this is awesome</span></td> 
 
     </tr> 
 
    </table> 
 
</div>

來源

2016-10-18 16:07:57 Castiblanco

你可以風格，你想要的任何東西在你的.servicecircle:hover:after 就像這樣：

.servicecircle:hover:after{ 
background-image: url('/anonymous/for/reasons.png'); 
cursor: pointer; 
content: 'Service Description..'; 
color:red; // Your own style #1 
font-family: cursive; // #2 
border: 1px solid black; // #3 
width:100%; // #4 
height: 30px; // #5 
}

這guide會幫助你。

要居中文本，更新此

.servicecircle:after { 
width: 204px; 
height: 204px; 
background-image: url('/anonymous/for/reasons.png'); 
display: inline-block; 
background-repeat: no-repeat; 
display: flex; 
justify-content: center; 
align-content: center; 
/* Button transition*/ 
-o-transition:.5s; 
-ms-transition:.5s; 
-moz-transition:.5s; 
-webkit-transition:.5s; 
transition:.5s; 
/* Content is inserted */ 
content: 'Service 1'; 
}

關注這個Centering Guide

來源

2016-10-18 16:13:01 MuhammadJ

我需要將文本對齊到div的中心，但如果我在這裏放置一些邊距，它會爲整個div而不是文本：L – Ben

@Ben首先，從你的'.servicecircle：'後刪除'margin-left'和'margin-right'：然後，添加'display：flex;''justify-content：center;''align-content ：center;'並且文本將居中。按照此[定位指南]（https://css-tricks.com/centering-css-complete-guide/）。我已經更新了答案。 – MuhammadJ

更改懸停與CSS文本，還風格的文字

回答

相關問題