Question

我目前正在使用2个CSS栏，其中一个出现在栏上的鼠标上方。我想要一个更好的解决方案，只使用1个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}

Answer 1

我不确定您要对<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;
}

在CSS栏上鼠标上显示文本

1 个答案: