изменить класс css при наведении курсора мыши

Привет, я пытаюсь заставить мою навигационную панель делать эффект фокуса css при наведении курсора, поэтому он не изменится, пока другой пункт меню не наведет курсор мыши. Я пытаюсь сделать это с помощью Jquery.

Вот мой код (кстати, я импортировал скрипт jquery и свой класс css):

    <div id="topNav">
<a href="contact.html"class="topNavNormal"><div id="topNav4" class="topNavNormal">Contact Us</div></a>
<a href="about.html" class="topNavNormal"><div id="topNav3" class="topNavNormal">About Us</div></a>
<a href="services.html" class="topNavNormal"><div id="topNav2" class="topNavNormal">Services</div></a>
<a href="index.html" class="topNavActive"><div id="topNav1" class="topNavActive" style="border-left: 3px solid #c0c0c0;">Home</div></a>
<script type="text/javascript">
$(document).ready(function(){
$('#topNav1').mouseover(function(){
    $('#topNav1').removeClass().addClass('topNavActive'),
    $('#topNav2').removeClass().addClass('topNavNormal'),
    $('#topNav3').removeClass().addClass('topNavNormal'),
    $('#topNav4').removeClass().addClass('topNavNormal'),
    });
}),
$('#topNav2').mouseover(function(){
    $('#topNav2').removeClass().addClass('topNavActive'),
    $('#topNav1').removeClass().addClass('topNavNormal'),
    $('#topNav3').removeClass().addClass('topNavNormal'),
    $('#topNav4').removeClass().addClass('topNavNormal'),
    });
}),
$('#topNav3').mouseover(function(){
    $('#topNav3').removeClass().addClass('topNavActive'),
    $('#topNav1').removeClass().addClass('topNavNormal'),
    $('#topNav2').removeClass().addClass('topNavNormal'),
    $('#topNav4').removeClass().addClass('topNavNormal'),
    });
}),
$('#topNav4').mouseover(function(){
    $('#topNav4').removeClass().addClass('topNavActive'),
    $('#topNav1').removeClass().addClass('topNavNormal'),
    $('#topNav3').removeClass().addClass('topNavNormal'),
    $('#topNav2').removeClass().addClass('topNavNormal'),
});
});
</script>
</div>

Также вот мои классы Css:

<style type="text/css">
#topNav1
{
text-align: center;
font-size: 18px;
float: right;
width: 50px;
height: 64px;
}
#topNav2
{
text-align: center;
font-size: 18px;
float: right;
width: 70px;
height: 64px;
}
#topNav3
{
text-align: center;
font-size: 18px;
float: right;
width: 90px;
height: 64px;
}
#topNav4
{
text-align: center;
font-size: 18px;
float: right;
width: 90px;
height: 64px;
}
#topNav1, #topNav2,  #topNav3{
border-right: 1px solid #c0c0c0;
}
#topNav4{
border-right: 3px solid #c0c0c0;
}
a .topNavNormal{
line-height: 54px;
color: #42647F;
}
.topNavNormal{
background-color: #B0E0E6;
}
a .topNavActive{
line-height: 54px;
color: #00EEEE;
background-color: #5F9EA0;
}
</style>

jquery css mouseover onmouseover
person Matthew    schedule 31.08.2011    source источник
comment
если вы не собираетесь беспокоиться о ie6, используйте селектор css :hover htmldog.com/guides/cssintermediate /псевдоклассы   -  person James Khoury    schedule 31.08.2011
comment
Я пытался проверить селектор css, но я не видел ни одного, который работал бы для фокуса при наведении курсора (есть наведение, но оно отменяется, как только ваша мышь отключается, но я хочу, чтобы он отменялся только тогда, когда другой пункт меню выделен) . Также я не могу заставить пользователей щелкнуть, чтобы сфокусироваться, потому что щелчок перейдет на новую страницу.   -  person Matthew    schedule 31.08.2011
comment
Ах, я не совсем понял, но теперь я верю, что вы имеете в виду, что последним наведенным элементом будет этот активный класс   -  person James Khoury    schedule 31.08.2011

Ответы (6)


arrow_upward
9
arrow_downward

Если вас не волнует IE6, просто используйте :hover, как предложил Джеймс. В противном случае упростите свой код:

    $(document).ready(function () {
        $('#topNav a').hover(function () {
            $(this).addClass('topNavActive');
        }, function () {
            $(this).removeClass('topNavActive');
        });
    });

если вы хотите имитировать :focus (но с наведением мыши):

    $(document).ready(function () {
        $('#topNav a').hover(function () {
            $(this).siblings().removeClass('topNavActive');
            $(this).addClass('topNavActive');
        }
    });

это то, что вам нужно?

person Samich    schedule 31.08.2011
comment
Проблема в том, что это все еще зависание. я пытаюсь сделать так, чтобы это было похоже на селектор css: focus, без необходимости щелкать, чтобы активировать его (как если бы он был при наведении курсора мыши). или, другими словами, я не хочу, чтобы он больше не выделялся, если не будет чего-то еще. - person Matthew; 31.08.2011
comment
Второй обратный вызов функции удалит выделение при перемещении мыши к другому элементу. В данный момент будет выделен только один элемент. - person Samich; 31.08.2011
comment
хорошо, я попробую это завтра, как только встану (я должен был спать 2 часа назад). Если это сработает, я отмечу ваш ответ как принятый (но только если он сработает). Кстати, спасибо, что разъяснили это для меня. знак равно - person Matthew; 31.08.2011
comment
Мне пришлось немного подправить вторую часть кода, но теперь она работает. Спасибо за помощь. Без помощи мне бы не потребовалось еще пару недель, чтобы сделать это. - person Matthew; 03.09.2011

arrow_upward
8
arrow_downward

Лучше всего решить ее с помощью чистого CSS (вообще без jQuery). вот быстрый пример:

<style type="text/css">    
    .navItem { 
        background: yellow;
     }
    .navItem:hover { 
        background: blue;
    }
</style>
person Michael    schedule 31.08.2011
comment
Не будет работать для того, что мне нужно, потому что я хочу, чтобы он был похож на селектор :focus css, за исключением того, что он активируется как наведение (но только для элементов topNav). Он должен активировать фокус при наведении, чтобы щелкнуть по нему, чтобы открыть ссылку. - person Matthew; 31.08.2011

arrow_upward
0
arrow_downward 

.topNavNormal{
    background-color: #B0E0E6;
}

a .topNavNormal{
    line-height: 54px;
    color: #42647F;
}

если вы не используете их в разных местах, я бы объединил их, и тогда вы можете просто

a .topNavActive{    
    line-height: 54px;
    color: #00EEEE;
    background-color: #5F9EA0;    
}

и простой javascript, например:

$('topNavNormal').mouseover(function(){
    $('topNavNormal').removeClass('topNavActive');
    $(this).addClass('topNavNormal');
});
person James Khoury    schedule 31.08.2011

arrow_upward
0
arrow_downward

попробуйте что-то вроде этого.

    $('.topnav_class').over(function(){
        // delete all the classes of hover
        $(.topnav_class).removeClass('hover');
        // add the hover class just to this node
        $(this).addClass('hover);
    }, function(){
        $(this).addClass('hover');
    });

Вам нужно больше играть с $(this), чтобы вы могли сделать свой jQuery немного более СУХИМ (не повторяйтесь)

person Michael Koper    schedule 31.08.2011

arrow_upward
0
arrow_downward

Это работает для меня

$(".panel").hover(function () {
    $(this).addClass('panel-info');
    $(this).removeClass('panel-warning');
}, function () {
    $(this).removeClass('panel-info');
    $(this).addClass('panel-warning');
});
person Lucas Fernandez Roldan    schedule 08.01.2016

arrow_upward
0
arrow_downward

Это работает для меня. Если вы хотите сделать что-то интересное с помощью bootstrap. Попробуй это:

 $(".small").hover(function () {
        $(this).addClass('lead');
        $(this).removeClass('small');
    }, function () {
        $(this).removeClass('lead');
        $(this).addClass('small');
    });
person imrvasishtha    schedule 19.12.2018