跪求~~字体颜色定义无效 color

zlyy0703 2012-04-25 04:25:38

在css文件里面用了
.superiorMenu
{
width: 80px;
height:28px;
line-height: 28px;
float: left;
font-size: 13px;
text-align:center;
}
.superiorMenu a{ text-decoration:none; color:#ffffff; display:block; height:auto;}
.superiorMenu a:hover{background-image: url(../Images/dw_03.jpg); color:#187046;}

.aHover
{
background-image:url(../Images/dw_03.jpg);
color:#187046;
}
然后在aspx文件里面js部分用到了$(this).addClass("aHover");
基本思想是：鼠标不在superiorMenu区域时，深色背景白色文字。鼠标悬浮时淡色背景深色文字。当鼠标离开superiorMenu到另一个区域时，继续保持鼠标悬浮时的效果。用了addclass，可是.aHover里面的color:#187046;没效果。鼠标离开后，背景图片还在，可是字体颜色却恢复成白色了。
小弟才疏学浅，求各位大哥帮帮忙！在此先谢过了

...全文

1177 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

pxy1510742 2012-04-26

打赏
举报

其实楼主这样设置不是没有生效，而只是优先级不够，.aHover的color被superiorMenu的color覆盖了，你可以去掉.superiorMenu a{}测试，发现当鼠标离开时颜色和背景是不会变的。对于你的要求，我想了一个不是很好的办法：采用addClass来实现.superiorMenu a{}样式，当mouseout的时removeClass{} .superiorMenu 里面的样式。

zlyy0703 2012-04-26

打赏
举报

主要就是想得是鼠标移动到子菜单时，主菜单可以保持鼠标悬浮时的效果

zlyy0703 2012-04-26

打赏
举报

太多了。只能贴一部分。
css文件



.aHover

 {

 	background-image:url(../Images/Power/Index/dw_03.jpg);

	color:#187046;

 }

 .superiorMenu

{

    width: 80px;

    height:28px;

    line-height: 28px;

    float: left;

    font-size: 13px;

    border-right: 1px solid #5B7C6B;

    text-align:center;

}

.superiorMenu a{ text-decoration:none; color:#ffffff; display:block; height:auto;}

.superiorMenu a:hover{background-image: url(../Images/Power/Index/dw_03.jpg);}

.sonMenu

{

    width:140px;

    line-height: 25px;

    text-align:left;

    position: absolute;

    font-size: 13px;

    border: 1px solid #6ABE9D;

    background: white;

    display: none;    

}

aspx文件的js部分



 $(".superiorMenu").hover(

                function(e) {

                    $(this).addClass("aHover");

                    //获取该移动项下面的子菜单

                    var menu = $(this).children("div");

                    //子菜单与左端的距离

                    var width;

                    //菜单父div(id=z)与div(id=menu_div)的距离

                    var zWidth = $("#z").css("margin-left").substring(0, $("#z").css("margin-left").length - 2) * 1;

                    //菜单父div(id=menu_div)与浏览器左端的距离

                    var mWidth = $("#menu_div").offset().left;

                    //判断div(id=menu_div)与浏览器左端的距离，如果小于=0则子菜单位置为div(id=z)的宽度+跟菜单索引*跟菜单宽度

                    //否则为根菜单与浏览器左端的距离

                    if ($("#menu_div").offset().left <= 0) {

                        //width = $(this).index() * $(this).width();

                        width = $(this).offset().left;

                    } else {

                        width = $(this).offset().left;

                    }

                    menu.css({ left: width, "top": $("#logo_img_div").height() + $(this).height() });

                    menu.show();

                },

                function() {

                    //获取该移动项下面的子菜单

                    var menu = $(this).children("div");

                    menu.hide();

                    $(this).removeClass("aHover");

                }

            )

三石-gary 2012-04-26

打赏
举报

[Quote=引用 11 楼的回复:]

对呀，您的那个例子我运行了以后，效果就是鼠标移开以后字体颜色变回了白色的
[/Quote]
最好是贴出你的代码。。猜的很累

zlyy0703 2012-04-26

打赏
举报

对呀，您的那个例子我运行了以后，效果就是鼠标移开以后字体颜色变回了白色的

wzhiyuan 2012-04-26

打赏
举报

你去掉干什么？我本来就是看你的需要，两个规则一样，所以加到一起的，
如果你需要不一样，你分开写就是
还有，怎么能说是#nav a:hover实现的，你鼠标都移开了，如果是这个实现在那不是和你的例子一样字体变回白色了

zlyy0703 2012-04-26

打赏
举报

谢谢wzhiyuan，我试了您那个程序的。可是您那个字体变红的功能是#nav a:hover实现的,并不是addclass的#nav a.hover。如果把#nav a:hover去掉，字体是不会变色的。

wzhiyuan 2012-04-25

打赏
举报

我给你写的你没看明白？
你不是用脚本在mouseover事件里为a 增加了.ahover 的class吗,但是
你CSS是直接写的 .ahover{}但是这个优先级没有
.superiorMenu a 这个优先级高，所以你只要把
.ahover{}写成 .superiorMenu a.ahover{}就可以了

zlyy0703 2012-04-25

打赏
举报

我要实现的是
一开始：深色背景，白色文字，用 .superiorMenu a
鼠标悬浮：浅色背景，深色文字，用.superiorMenu a：hover
鼠标移开：仍保持浅色背景，深色文字。.aHover就是用来实现鼠标移开后的效果的。否则鼠标移开后会恢复到深色背景，白色文字的状态

wzhiyuan 2012-04-25

打赏
举报

我刚才写css 写重复了，但是写的是对的，
楼主你确认你试过了不行？
用我的例子你试试



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>



 <style type="text/css" >

 #nav{ background-color:Gray;}

 #nav a{ color:White;} 

 #nav a:hover,

 #nav a.hover{color:Red;}

</style> 



<script type="text/javascript" src="js/jquery-1.6.4.min.js" ></script>

</head>

<body>

 <div id="nav">

 <a href="#">home</a> <a href="#">product</a>

 </div>

 <script type="text/javascript" >

     $("a").mouseover(function() {

         $(this).addClass("hover");

     });

 </script>

</body>

</html>

这个是css 选择符优先级的问题
我给你改动的只是一点，你是直接写的
.hover{}
我是写成了 a.hover{}

三石-gary 2012-04-25

打赏
举报

[Quote=引用 3 楼的回复:]

不行的，我试了。字是可以看到的，只是是白色的。
[/Quote]
.aHover
你这个是控制什么的啊。。
.superiorMenu a{ text-decoration:none; color:#ffffff; display:block; height:auto;}
这里有字体设置是白色的啊。。。

zlyy0703 2012-04-25

打赏
举报

不是的，字是可以看到的，只是是白色的。想改成其他颜色

zlyy0703 2012-04-25

打赏
举报

不行的，我试了。字是可以看到的，只是是白色的。

三石-gary 2012-04-25

打赏
举报

是不是被背景图遮住了。。你把背景图片去掉再试试

wzhiyuan 2012-04-25

打赏
举报

.superiorMenu a:hover{background-image: url(../Images/dw_03.jpg); color:#187046;}

.aHover
{
background-image:url(../Images/dw_03.jpg);
color:#187046;
}

可以合一起



.superiorMenu a:hover，

.superiorMenu a.aHover

{background-image: url(../Images/dw_03.jpg); color:#187046;}

 {

  background-image:url(../Images/dw_03.jpg);

color:#187046;

 }