CSSバーのマウスオーバーでテキストを表示

現在、2つの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に私は「あなたが<can>と<ant>タグで何をしようとして、本当にわからないんだけど、私は少しも持って

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

？ –

マウスがトップバーに触れると、バーの内容がタイトルからメニューに変わります。 – zeitue

疑いは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

CSSバーのマウスオーバーでテキストを表示

答えて

関連する問題