CSS Hover + Фоновое изображение - PullRequest
Новая
       17

CSS Hover + Фоновое изображение

5 голосов
/ 24 февраля 2011

Я создаю специальный элемент управления пользовательского интерфейса, используя HTML / CSS для имитации кнопок панели управления Windows 7. Пока что у меня есть верное расположение, и теперь я хотел бы добавить немного косметики к нему.

Как видно из рисунка, при наведении курсора на кнопку с помощью мыши появляется градиент.

http://m.cncfps.com/zack/files/this-control.png

Теперь вы можете увидеть здесь , что я сделал макет. Я хотел бы добавить эффект :hover ко всему элементу div с фоновым изображением.

В настоящее время вот что у меня есть для CSS - но это не работает. В IE8 или FireFox нет изображения

РЕДАКТИРОВАТЬ: Он работает в Chrome, но не в FireFox или IE. 

#cp .cp-item:hover
{
    background:url(images/hoverbg.png) repeat-x;
}

Однако он работает с background-color, а не с изображением.

Ответы [ 2 ]

6 голосов
/ 24 февраля 2011
  • В вашем CSS нет ничего (уместного) неправильного.
  • Путь к вашему изображению правильный.

Он уже работает в Chrome.

Chrome кажется более интеллектуальным (или снисходительным), чем другие браузеры.Если я проверяю страницу, она вставляет вещи:

enter image description here

Это не работает в других браузерах, потому что у вас нет правильной структуры страницы (нет типа документа, нет * 1014)* tag, no <body> tag и т. д.) - ваша страница не проверяет , а другим браузерам «не нравится».Я не знаю точную причину , почему он не работает с другими браузерами - я предполагаю, что причина либо в деталях реализации, либо скрыта в спецификации W3.

Это работаетво всех браузерах:

Live Demo
(я использую тег <base>, чтобы сделатьпути работают)

Это ваш точный код, завернутый в типичный шаблон, с добавлением тега <base>. 

<!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>

<base href="http://toro.azwestern.edu/~zbl/" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<link rel="stylesheet" href="style.css" type="text/css" />

<div id="cp">
    <div class="cp-item"><span>
        <div class="cp-item-icon"><img src="images/syssec.png" title="System and Security" /></div>
        <div class="cp-item-content">
            <h4>System and Security</h4>
            <ul>
                <li><a href="#">item</a></li>

                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
            </ul>

        </div>
    </span></div>
</div>

</body>
</html>
1 голос
/ 24 февраля 2011

попробуйте изменить #cp .cp-item:hover на #cp div.cp-item:hover

...