文章/答案/技术大牛

发布

社区首页 >问答首页 >在CSS栏的鼠标上显示文本

问在CSS栏的鼠标上显示文本
EN

Stack Overflow用户

提问于 2012-01-09 11:49:39

回答 1查看 1.8K关注 0票数 0

我目前使用的是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}

css

web

hidden

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-01-09 14:28:02

我真的不知道你想用<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;
}

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/8783719

复制

相似问题

问在CSS栏的鼠标上显示文本
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在CSS栏的鼠标上显示文本EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在CSS栏的鼠标上显示文本
EN