Проблема с парением в CSS при использовании нечетной панели навигации - PullRequest
Новая
       66

Проблема с парением в CSS при использовании нечетной панели навигации

1 голос
/ 05 октября 2011

У меня возникла небольшая проблема, которая заставляет меня задуматься. Я знаю, как я это делаю, это странно и может вызвать проблемы, но я хотел попробовать это только с помощью CSS. Я понял это довольно близко, но с проблемой, и надеялся, что у кого-то может появиться идея, прежде чем я сдаюсь.

В основном у меня есть панель навигации, которая меняет изображение при наведении курсора. Разница с этим заключается в том, что я хотел, чтобы при наведении мыши менялись два изображения. Поэтому я решил, что, возможно, смогу сделать это, поместив два изображения в одно большее и переполнив изображение вне ссылки при наведении.

Теперь, это работает несколько, но вы можете перебирать ссылки слева направо и отображать зависания, но если вы делаете это справа налево, это не работает.

Вот ссылка на тест http://www.pclwebdesign.co.uk/fruit

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

CSS 

body{
    background:#FFF;
    }

#wrap{
    margin:0 auto;
    width:894px;
    height:900px;
    background:url(../images/background.jpg) no-repeat;
    }

#header{
    position:relative;
    margin:0 auto;
    width:625px;
    height:92px;
    }

#navbar{
    position:relative;
    display:block;
    margin-left:114px;
    width:626px;
    height:170px;
    background:url(../images/navbar2.jpg)
}

ul.cssmenu {    
list-style: none; padding-left: 24px; margin-top:-12px;     
}
.displace {    
position: absolute;    left: -5000px;     
}
ul.cssmenu li {    
float: left;    
}
ul.cssmenu li a {    
display: block; height: 170px;    
}

/**    Normal Links*/
ul.cssmenu li.about a {  
margin-right:10px; width:86px; height:59px;}
ul.cssmenu li.gallery a { width:120px; height:59px;}
ul.cssmenu li.home a {  width:150px; height:59px;}
ul.cssmenu li.contact a {  width:120px; height:59px;}
ul.cssmenu li.video a {  width:97px; height:59px;}

/**    Hidden LED Navbar images*/
ul.cssmenu li.about a .led {
    display: none; width:626px; height:170px; margin-left:-24px;}
ul.cssmenu li.gallery a .led {
    display: none; width:626px; height:170px; margin-left:-120px;}
ul.cssmenu li.home a .led {
    display: none; width:626px; height:170px; margin-left:-240px;}
ul.cssmenu li.contact a .led {
    display: none; width:626px; height:170px; margin-left:-390px;}
ul.cssmenu li.video a .led {
    display: none; width:626px; height:170px; margin-left:-510px; }


/**    Hover Links*/
ul.cssmenu li.about a:hover .led {
    display: block; width:626px; height:170px; margin-left:-24px; background:url(../images/navbar2.jpg); background-position: 0px -170px;    
    }
ul.cssmenu li.gallery a:hover .led {
    display: block; width:626px; height:170px; margin-left:-120px; background:url(../images/navbar2.jpg); background-position: 0px -340px;    
    }
ul.cssmenu li.home a:hover .led {
    display: block; width:626px; height:170px; margin-left:-240px; background:url(../images/navbar2.jpg); background-position: 0px -510px;    
    }
ul.cssmenu li.contact a:hover .led {
    display: block; width:626px; height:170px; margin-left:-390px; background:url(../images/navbar2.jpg); background-position: 0px -680px;    
    }
ul.cssmenu li.video a:hover .led {
    display: block; width:626px; height:170px; margin-left:-510px; background:url(../images/navbar2.jpg); background-position: 0px -850px;    
    }

/** Navigation bar finish */

HTML 

<div id="wrap">
    <div id="header">
    </div>

    <div id="navbar">
      <ul class="cssmenu">
        <li class="about"><a href="about.htm" title="About"><span class="led"></span></a></li>

        <li class="gallery"><a href="gallery.htm" title="Gallery"><span class="led"></span></a></li>

        <li class="home"><a href="home.htm" title="Home"><span class="led"></span></a></li>

        <li class="contact"><a href="contact.htm" title="Contact"><span class="led"></span></a></li>

        <li class="video"><a href="video.htm" title="Video"><span class="led"></span></a></li>

      </ul>
    </div>


</div>

1 Ответ

1 голос
/ 05 октября 2011

Вы пробовали искать альтернативные методы для этого? Я думаю, что это была бы отличная возможность использовать очень простой jQuery. Я сделал быстрый набросок кода на jsfiddle http://jsfiddle.net/Ee37A/4/, чтобы вы увидели. Вам, очевидно, нужно будет стилизовать элементы div и заменить текст изображениями, но я думаю, что это будет гораздо более чистый метод для достижения того, что вы ищете.

По сути, когда вы наводите курсор мыши на элемент div с классом «.about» (кнопка навигации), jQuery находит элемент div с классом aboutPicture (светодиодное фото) и показывает его. Когда ваша мышь уходит, div aboutPicture скрыт. Я запрограммировал только два разных li, но вы можете использовать это как основу.

Вы можете найти больше информации о jQuery и загрузить исходный код здесь: http://jQuery.com. Вы хотите создать внешний файл .js, содержащий функции, показанные на jsfiddle.net.

...