开发者

Rewrite ui-state-hover

I'm using jquery ui 1.8.5, and i develop a menu, but i'm having troubles trying to remove from default style of the class ui-state-hover the property of border-width.

Which recommendation have to accoplish my goal here's my code

the html

<div id="menu" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
    <label class="formatText" id="lblIndicators">Primer Menu</label>
    <span class="ui-icon ui-icon-triangle-1-e menuIcon" style="float:right"></span>
    <div id="subMenu" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
    <ul class="options">
        <li>
            <label class="formatText">Sub Menu Uno</label>
            <span class="ui-icon ui-icon-triangle-1-s" style="float:right"></span>
            <div id="subMenuRight" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
                <ul class=options>
                    <li>Sub-Sub Menu Uno</li>
                    <li>Sub-Sub Menu Dos</li>
                </ul>
            </div>
        </li>
        <li>Sub Menu Dos</li>
    </ul>
</div>
</div>

my js

$(document).ready(initialize);

function initialize(){

    $("#menu").hover(mouseIn,mouseOut);
    $(".options li").hover(overOption,outOption);
    $("#subMenu").hover(openRightMenu,closeRightMenu);
}

function mouseIn(){
    $(this).find('span').attr('class','');
    $(this).find('span').attr('class','ui-icon ui-icon-triangle-1-s');
    $("#subMenu").slideDown(100);
}

function mouseOut(){
    $(this).find('span').attr('class','');
    $(this).find('span').attr('class','ui-icon u开发者_高级运维i-icon-triangle-1-e');
    $("#subMenu").fadeOut(100);
}

function overOption(){
    $(this).attr('class','ui-state-hover ui-corner-all');
}

function outOption(){
    $(this).attr('class','');
}

function openRightMenu(){
    $("#subMenuRight").slideDown(100);
}

function closeRightMenu(){
    $("#subMenuRight").slideUp(100);
}

Here's a live exmaple


What exactly do you want to accomplish? Just removing the border?

#menu .ui-state-hover{
    border-width: 0;   
}

jsFiddle

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜