Question

我遇到了一些我正在使用的jQuery / CSS的问题（不确定它是哪一个），但这是正在发生的事情：

用户可以将鼠标悬停在“li”元素上，选项栏将会显示从右侧滑入，并在悬停时将滑杆滑动到右：http://uploadir.com/u/vx447j
li元素也会溢出它们在Y轴上的盒子，我为其实现了导航系统： http://uploadir.com/u/20l4bh

当您单击时，它会完美运行，直到您将鼠标悬停在其中一个元素上。它将整个事物带回到它的原始位置，例如：单击（http://uploadir.com/u/36x049），然后将鼠标悬停在元素（http://uploadir.com/u/r9047d）上

正如您在上面的图片中看到的那样，它会重置，然后不允许我再次点击。我使用的jQuery是：

$('#chat_sidebar ul li').hover(
function() {
    id = $(this).attr('rel');
    $('#chat_sidebar_options_'+id).stop().animate({right: 0}, 'fast');
}, function() {
    id = $(this).attr('rel');
    $('#chat_sidebar_options_'+id).stop().animate({right: -60}, 'fast');
});
$('#down').click(function() {
    new_current = current + 29;
    current = new_current;
    $('#chat_sidebar').scrollTop(current);
    current2 = $('#chat_sidebar').scrollTop();
});

li元素的CSS：

#chat_sidebar ul li {
    width: 188px;
    height: 21px;
    background: #2f2f2f;
    font-weight: bold;
    text-shadow: 0px -1px 0px #000000;
    filter: dropshadow(color=#000000, offx=0, offy=-1);
    background: -moz-linear-gradient(top,  #2f2f2f 0%, #202020 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2f2f2f), color-stop(100%,#202020));
    background: -webkit-linear-gradient(top,  #2f2f2f 0%,#202020 100%);
    background: -o-linear-gradient(top,  #2f2f2f 0%,#202020 100%);
    background: -ms-linear-gradient(top,  #2f2f2f 0%,#202020 100%);
    background: linear-gradient(top,  #2f2f2f 0%,#202020 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f2f2f', endColorstr='#202020',GradientType=0 );
    border: thin solid #000000;
    margin-top: -1px;
    padding-top: 7px;
    padding-left: 5px;
    -webkit-box-shadow: inset 0px 1px 0px 0px #696969;
    -moz-box-shadow: inset 0px 1px 0px 0px #696969;
    box-shadow: inset 0px 1px 0px 0px #696969;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    -moz-border-radius-bottomright: 2px;
    -moz-border-radius-bottomleft: 2px;
    -webkit-border-radius: 2px 2px 2px 2px;
    border-radius: 2px 2px 2px 2px;
    position: relative;
    cursor: pointer;
    float: left;
}

然后滑动选项区域：

.sidebar_options {
    position: absolute;
    right: -60px;
    float: right;
    width: 55px;
    height: 23px;
    background-color: #131212;
    border: thin solid #000000;
    border-right: 0px;
    border-left: 0px;
    -webkit-box-shadow: inset 0px 0px 5px 0px #000000;
    -moz-box-shadow: inset 0px 0px 5px 0px #000000;
    box-shadow: inset 0px 0px 5px 0px #000000;
    padding-left: 5px;
    padding-top: 5px;
    z-index: 100;
    top: -1px;
    cursor: default;
}

如果您需要其他任何可以帮助您的方法，请提供任何帮助，请发表评论！

感谢。

Answer 1

因此，当您单击下拉菜单时，应该清除不应再应用悬停功能。如果是这样的话，我会做的是在ul

上切换一个类

$('#down').click(function() {
    new_current = current + 29;
    current = new_current;
    $('#chat_sidebar').scrollTop(current);
    current2 = $('#chat_sidebar').scrollTop();
    $("#chat_sidebar ul").removeClass("notSelected").addClass("selected");
});

$('#chat_sidebar ul.notSelected li').hover(
function() {
    id = $(this).attr('rel');
    $('#chat_sidebar_options_'+id).stop().animate({right: 0}, 'fast');
}, function() {
    id = $(this).attr('rel');
    $('#chat_sidebar_options_'+id).stop().animate({right: -60}, 'fast');
});

如果您默认在ul上设置notSelected类，那么只要您将鼠标悬停在ul上，它就会显示悬停动画，如果您单击向下按钮，则悬停动画将停止。这也意味着你需要做这样的事情

$('#up').click(function() {
    $("#chat_sidebar ul").removeClass("selected").addClass("notSelected");
});

修改

sidebar_options:hover{
 /* Set your on hover styling here */
}

jQuery＆amp; CSS问题 - 动画

1 个答案: