CSS ролловеры - PullRequest
Новая
       7

CSS ролловеры

2 голосов
/ 17 июня 2010 
<div id="navigation>
    <ul class="navlist">
        <li><img src="images/btn1.gif"/></li>
        <li><img src="images/btn2.gif"/></li>
        <li><img src="images/btn3.gif"/></li>
    </ul>
</div>

Как бы я мог дать эти "кнопки" в состояниях пролонгации списка без использования JS? Я полностью рисую бланк ...

Эти ссылки должны быть изображениями.

Ответы [ 3 ]

3 голосов
/ 17 июня 2010

Если вы поддерживаете более новые браузеры (браузеры, которые поддерживают селектор :hover на всех элементах, что в основном все, кроме IE6, см. здесь ), вы можете сделать это с помощью CSS при условии изменения HTML-кода. , Вам нужно будет удалить теги img и вместо этого использовать фоновые изображения.

CSS (это простой пример с 2 изображениями, вам нужно установить высоту + ширину. Если у вас много разных изображений, вам потребуется класс css для каждого из них): 

<style type="text/css">
    .navlist li { width: 32px; height: 32px; background-repeat: no-repeat; background-image: url('images/image1.gif'); }
    .navlist li:hover { background-image: url('images/image2.gif'); }
</style>

HTML: 

<div id="navigation">
    <ul class="navlist">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
2 голосов
/ 17 июня 2010

Есть много способов сделать это.В основном, перемещайте одно изображение с экрана при наведении курсора.Или вы можете изменить z-индекс двух изображений друг над другом при наведении курсора, или вы можете сделать это с фоновыми изображениями или с опцией отображения.

Я предпочитаю использовать опцию отображения, так какCSS довольно прост.

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

Вот код для страницы, которая содержит HTML и CSS вместе. Объявление DOCTYPE необходимо, чтобы оно работало в IE 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/\xhtml1/DTD/xhtml1-strict.dtd">
    <head>
        <style type="text/css">
            a img {
                border:none;
            }
            ul {
                list-style-type: none;
            }
            img.defaultSt {
                display: inline;
            }
            img.hoverSt {
                display: none;
            }
            li:hover img.defaultSt {
                display: none;
            }
            li:hover img.hoverSt {
                display: inline;
            }
        </style>
    </head>
    <body>
        <div id="navigation">
            <ul class="navlist">
                <li>
                    <img class="defaultSt" src="http://mrg.bz/vh60HV" />
                    <img class="hoverSt" src="http://mrg.bz/CcDOmL" />
                </li>
            </ul>
        </div>
    </body>
</html>
0 голосов
/ 17 июня 2010

Вы можете попробовать использовать прозрачное изображение в качестве основной ссылки, а затем использовать css для изменения фона 

<style type="text/css">
    a.img1, a.img1:link { background-image: url(images/btn1.gif); }
    a.img1:hover { background-image: url(images/btn1_over.gif); }

    a.img2, a.img2:link { background-image: url(images/btn2.gif); }
    a.img2:hover { background-image: url(images/btn2_over.gif); }

    a.img3, a.img3:link { background-image: url(images/btn3.gif); }
    a.img3:hover { background-image: url(images/btn3_over.gif); }
</style>

<div id="navigation>
    <ul class="navlist">
        <li><a class="img1" href=""><img src="images/transparent_image.gif" width="x" height="y"/></a></li>
        <li><a class="img2" href=""><img src="images/transparent_image.gif" width="x" height="y"/></a></li>
        <li><a class="img3" href=""><img src="images/transparent_image.gif" width="x" height="y"/></a></li>
    </ul>
</div>

Вы просто должны иметь в виду размер рассматриваемых изображений.

...