在鼠標懸停的CSS欄上顯示文本

我目前使用的是兩個CSS欄，一欄出現在欄上方的鼠標上方。我想要一個更好的解決方案，只需使用1個CSS欄並將鼠標移動到欄上的文本而不是文本。這怎麼辦？在鼠標懸停的CSS欄上顯示文本

這是我的代碼。

index.shtml

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html><head> 

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 


    <link href="../style.css" rel="stylesheet" type="text/css"> 

<!--#include virtual="../navigation.shtml"--> 
</head><body> 
<br> 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ant class="globalmenu"> 
&nbsp;Title</ant>&nbsp; 
<can class="globalmenu">Menu</can> 
<div style="text-align: center;" class="content"><big><big><span style="font-weight: bold;"><big>Test Page<br><br> 
<br> 
<br> 
<br> 
<br> 
<br> 
</big><br> 
</span></big></big> 
</div> 

<br> 

<br> 

</body></html>

的style.css

body { 
background: -moz-linear-gradient(left, #06fffd 0%, #1cbec0 17%, #00ffee 71%, #1d7781 100%); 
background: -webkit-linear-gradient(left, #06fffd 0%, #1cbec0 17%, #00ffee 71%, #1d7781 100%); 
background: -webkit-gradient(linear, left top, right top, color-stop(0, #06fffd), color-stop(0.17, #1cbec0), color-stop(0.71, #00ffee), color-stop(1, #1d7781)); 
background: -o-linear-gradient(left, #06fffd 0%, #1cbec0 17%, #00ffee 71%, #1d7781 100%); 
background: -ms-linear-gradient(left, #06fffd 0%, #1cbec0 17%, #00ffee 71%, #1d7781 100%); 
background: linear-gradient(left, #06fffd 0%, #1cbec0 17%, #00ffee 71%, #1d7781 100%); 

/*background-color: rgb(102, 255, 255);*/ 
color: rgb(0, 0, 0); 
} 





.middle { 
    text-align: center; 
} 

.socialbar { 
    position: fixed; 
bottom: 0; 
    left:20%; 
    height: 48px; 
    width: 60%; 
    background: #282828; 
    color: white; 
    text-align: center; 
} 




p{ 
    white-space:normal; 
} 
.content { 
    margin-top: 22px; 
    margin-left: 64px; 
    margin-bottom: 48px; 
    padding: 10px; 
} 

.globalmenu { 
     position: fixed; 

    top: 0; 
    left: 0; 
    bottom: 0; 
    height: 22px; 
    width: 100%; 
    /*background: #282828;*/ 
    background: -moz-linear-gradient(top, #9d9d9d 0%, #4b4c4c 17%, #2f3232 71%, #000000 100%); 
background: -webkit-linear-gradient(top, #9d9d9d 0%, #4b4c4c 17%, #2f3232 71%, #000000 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9d9d9d), color-stop(0.17, #4b4c4c), color-stop(0.71, #2f3232), color-stop(1, #000000)); 
background: -o-linear-gradient(top, #9d9d9d 0%, #4b4c4c 17%, #2f3232 71%, #000000 100%); 
background: -ms-linear-gradient(top, #9d9d9d 0%, #4b4c4c 17%, #2f3232 71%, #000000 100%); 
background: linear-gradient(top, #9d9d9d 0%, #4b4c4c 17%, #2f3232 71%, #000000 100%); 

    color: white; 
    opacity:0.9; 

} 





can { 
    display:none ; 
} 

ant:hover + can { 
    display: inline; 
    float: left; 
} 

.globalmenu a:link { color : white; } 
.globalmenu a:visited{color:yellow} 
.globalmenu a:hover{color:red} 
.globalmenu a:active{color:lime} 
body a:link {color:black} 
body a:visited { color : purple;} 
body a:hover {color:red} 
body a:active {color:green}

來源

2012-01-09 zeitue

你想吃點什麼最終結果的外觀和行爲像？ – 2012-01-09 05:24:02

我想要它，所以當鼠標觸摸頂部欄時，欄的內容從標題更改爲菜單。 – zeitue 2012-01-09 05:29:32

我真的不知道什麼是你想與<can>和<ant>標籤做的，但我有絲毫的可疑you're doing it wrong。

在任何情況下，你可以試試：http://jsfiddle.net/uJ7j4/

HTML

<div class="globalmenu"> 
    <ant>Title</ant> 
    <can>Menu</can> 
</div>

CSS

.globalmenu can { 
    display: none; 
} 
.globalmenu:hover can { 
    display: inline; 
} 
.globalmenu:hover ant { 
    display: none; 
}

來源

2012-01-09 06:28:02

你解決了我想要做的事情。謝謝。 – zeitue 2012-01-09 06:39:46

在鼠標懸停的CSS欄上顯示文本

回答

相關問題