Эффект наведения курсора навигационного меню только в определенном случае

ProgramBox

Эффект наведения курсора навигационного меню только в определенном случае

Post author:admin
Запись опубликована:19 апреля, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #css #menu

#javascript #jquery #HTML #css #меню

Вопрос:

Мне нужен точный эффект навигационного меню этого веб-сайтаhttp://recruitmentmalta.com/ptowers но в более аккуратном коде. Этот код был сгенерирован с помощью инструмента, который преобразует из PSD в HTML / CSS и в основном создал кучу бесполезного кода. Я знаю, как создать это меню, за исключением той части, где эффект Shop Now должен отключаться, только если на контакт наведен указатель мыши.

Есть идеи о том, как я могу воссоздать этот эффект отключения при наведении курсора мыши на кнопку контакта (когда магазин теперь отключен)?

Это то, что я сделал до сих пор, чтобы дать вам представление

     <ul>
        <li id="homeButton"> <img src="images/home.png" onmouseout="this.src='images/home.png'" onmouseover="this.src='images/homeHover.png'" width="115" height="55" alt="home" /></li>
        <li id="aboutButton"> <img src="images/about.png" onmouseout="this.src='images/about.png'" onmouseover="this.src='images/aboutHover.png'" width="115" height="55" alt="about" /></li>
        <li id="newsButton"> <img src="images/news.png" onmouseout="this.src='images/news.png'" onmouseover="this.src='images/newsHover.png'" width="115" height="55" alt="news" /></li>
        <li id="brandsButton"> <img src="images/brands.png" onmouseout="this.src='images/brands.png'" onmouseover="this.src='images/brandsHover.png'" width="115" height="55" alt="brands" /></li>
        <li id="storesButton"> <img src="images/stores.png" onmouseout="this.src='images/stores.png'" onmouseover="this.src='images/storesHover.png'" width="115" height="55" alt="stores" /></li>
        <li id="careersButton"> <img src="images/careers.png" onmouseout="this.src='images/careers.png'" onmouseover="this.src='images/careersHover.png'" width="115" height="55" alt="careers" /></li>
        <li id="contactButtonMenu"> <img src="images/contactButton.png" onmouseout="this.src='images/contactButton.png'" onmouseover="this.src='images/contactButtonHover.png'"  width="115" height="55" alt="contact" /></li>
        <li id="shopNowButton"> <img src="images/shopNowHover.png" width="114" height="53" alt="Shop Now" /> </li>
    </ul>

Это моя ссылка на JS Fiddle:http://jsfiddle.net/GHHJM /

1. Пожалуйста, опубликуйте пример кода, о котором идет речь, чтобы вопрос был более кратким.

2. @John Strickler — Я предоставил веб-сайт, о котором идет речь, поэтому весь код есть, кроме этого, у меня есть только набросок дизайна.

Ответ №1:

Это не так сложно.

Создайте меню в <ul> элементе, как это принято сегодня. Создайте стиль под названием hover с рамкой на нем, чтобы имитировать выделение. Установите для класса последнего элемента по умолчанию (стиль при отображении страницы) границу. Все остальное просто нормально для начала. Помните, что при работе со стилями вы можете «складывать» такие классы, как:

 <element class="firstclass hover otherclass">

Теперь создайте действие наведения:
$("li").hover(function () { $(elementtoputborderon).addClass("hover"); }, function () { $(this).removeClass("hover"); })

И для той части, где он отключается: $("#idofcontactbtn").hover(function () { $('#idoflastelement').removeClass("hover"); }, function () { $('#idoflastelement').addClass("hover"); })

Чтобы получить эффект «затухания» для последнего элемента, вы могли бы попробовать что-то вроде этого:

$('#lastitem').hover(function() { $(this).toggleClass('pretty-hover', 500); });

1. Я новичок в javascript, поэтому я не знаком с этим жаргоном. Когда вы ссылаетесь на стиль, вы имеете в виду создать класс, верно? должен ли у каждого li быть элемент?

2. Я добавил все необходимые элементы наведения в код, который я опубликовал выше, должен ли я добавить только элемент thing I для кнопки контакта?

3. Я добавил ссылку на JS Fiddle: jsfiddle.net/GHHJM — дайте мне знать, что я делаю не так. Класс .hover также находится в конце css.

Ответ №2:

Я, наконец, решил это довольно эффективным простым способом, это часть кода только для эффекта двух кнопок. Я надеюсь, что это поможет, если кому-либо это понадобится.

 <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Hover</title>
<script type='text/javascript' src='jquery.js'></script>

<script  type='text/javascript'>
$(document).ready(function(){
    $(".contactButton").hover(function() {
        $(contactButtonMenu).attr("src","images/contactButtonHover.png");
            }, function() {
        $(contactButtonMenu).attr("src","images/contactButton.png");
    });
});

$(document).ready(function(){
    $(".contactButton").hover(function() {
        $(shopNowButton).attr("src","images/shopNow.png");
            }, function() {
        $(shopNowButton).attr("src","images/shopNowHover.png");
    });
});
</script>

</head>

<body>

<img id="contactButtonMenu" src="images/contactButton.png" alt"Contact Button" class="contactButton" />
<img id="shopNowButton" src="images/shopNowHover.png" alt="Shop Now" class="shopNowButton" />

</body>
</html>

Однако это не работает в Firefox, есть идеи?