如何更改div的几个子div的样式?

时间:2013-11-23 21:09:17

标签: javascript jquery html css

我正在制作导航,我不想使用CSS3来制作渐变背景,而不是使用图像。但按钮有角,所以我的按钮由3个图像组成,使其大小与文本成比例。我试图改变悬停的背景,我需要改变所有3个背景:左,右和中。我试过jquery但它似乎没有用..

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
    $('.topnavbtn').mouseenter(function(){
        $(this).$('.left').css('background','url(images/nav/images/navLeft_on.png) no-repeat');
        $(this).$('.mid').css('background','url(images/nav/images/navBg_on.png) no-repeat');
        $(this).$('.right').css('background','url(images/nav/images/navRight_on.png) no-repeat');
    }).mouseout(function(){
        $(this).$('.left').css('background','url(images/nav/images/navLeft.png) no-repeat');
        $(this).$('.mid').css('background','url(images/nav/images/navBg.png) no-repeat');
        $(this).$('.right').css('background','url(images/nav/images/navRight.png) no-repeat');
    });
});
</script>

HTML:

<ul style="list-style-type: none; margin:0; padding:0;padding:10px;">
<li>
<a href="#">
<div class="topnavbtn">
<div class="left"></div>
<div class="mid">asdassdfdssdfsd</div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</a>
</li>

<li>
<a href="#">
<div class="topnavbtn">
<div class="left"></div>
<div class="mid">asdassdfdssdfsd</div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</a>
</li>

<li>
<a href="#">
<div class="topnavbtn">
<div class="left"></div>
<div class="mid">asdassdfdssdfsd</div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</a>
</li>

</ul>

和CSS:

.topnavbtn {
    height:34px;
    float:left;
    display:inline-block;
    margin:7px;
    font-weight:bold;
    text-transform:uppercase;
    color:#FFF;
    line-height: 34px;
}

.topnavbtn .left {
    height:34px;
    width:9px;
    background:url(images/nav/images/navLeft.png) no-repeat;
    float:left;
    display:inline-block;
}

.topnavbtn .right {
    height:34px;
    width:9px;
    background:url(images/nav/images/navRight.png) no-repeat;
    float:left;
    display:inline-block;
}

.topnavbtn .mid {
    background:url(images/nav/images/navBg.png) repeat-x;
    height:34px;
    width:auto;
    float:left;
    display:inline-block;
}

2 个答案:

答案 0 :(得分:3)

这是语法错误:

$(this).$('.left').css(...

$('.left', this).css(...

答案 1 :(得分:0)

只需替换

$(this).$('.left')

$(this).children('.left')

以及其他课程。