Показывать текст при наведении курсора на панель CSS - PullRequest
Новая
       5

Показывать текст при наведении курсора на панель CSS

0 голосов
/ 09 января 2012

В настоящее время я использую 2 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}

1 Ответ

3 голосов
/ 09 января 2012

Я не совсем уверен, что вы пытаетесь сделать с тегами <can> и <ant>, но у меня есть малейшее подозрение, что вы делаете неправильно .

В любом случае попробуйте что-то вроде: 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;
}
...