CSS: зависание не работает - PullRequest
Новая
       15

CSS: зависание не работает

3 голосов
/ 28 мая 2010 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <style type='text/css'>
            #body{
                margin:0px;
            }


            #headerDiv{

                background-color:#e0e2eb;
            }
            .header_innerHeaderDivs{
                border:solid 1px gray;
                display:inline;
                font:normal 11px tahoma;
                color:black;
            }
            .header_innerHeaderDivs:hover{
                padding:4px;
            }
        </style>
    </head>
    <body id='body'>
        <div id='headerDiv'>
            <div class='header_innerHeaderDivs'>Comapny</div>
            <div class='header_innerHeaderDivs'>Edit</div>
            <div class='header_innerHeaderDivs'>Inventory</div>
            <div class='header_innerHeaderDivs'>Logout</div>
        </div>
    </body>
</html>

Использование FireFox 3.6.3

Ответы [ 6 ]

4 голосов
/ 28 мая 2010

Вы можете попробовать:

#headerDiv div:hover{padding:4px;}

EDIT:

Если вы хотите, чтобы родительский div расширял, установите отображение .header_innerHeaderDivs в inline-block. Кроме того, как упоминалось выше, вы можете установить объявление dtd:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

или переходный вариант html4.01.

3 голосов
/ 28 мая 2010

если это навигационная панель, лучше просто использовать список ссылок (более семантический в этом смысле), чтобы ваше наведение также работало в ie (: hover работает только для элементов в ie) 

<ul id='header-nav'>
  <li><a>Comapny</a></li>
  <li><a>Edit</a></li>
  <li><a>Inventory</a></li>
  <li><a>Logout</a></li>
</ul>

тогда 

#header-nav {
  background-color:#e0e2eb;
}

#header-nav a {
  border:solid 1px gray;
  display:inline;
  font:normal 11px tahoma;
  color:black;
}

#header-nav a:hover {
  padding: 4px.
}

также совет: старайтесь не использовать "div" как часть имени класса. это не так полезно / описательно в семантике:)

1 голос
/ 03 ноября 2016

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

<div class="hoverChange"><div class='header_innerHeaderDivs'>Comapny</div></div>

А потом КСС 

.hoverChange :hover{
    padding: 4px;
}
0 голосов
/ 08 января 2015

Если вы используете IE, тогда вам нужно добавить <!DOCTYPE html> в начало. В противном случае IE очень требователен и распознает только :hover в тегах привязки.

EDIT: Альтернатива без CSS (с использованием jQuery .bind): 

    <script> 
      $('.header_innerHeaderDivs').bind('mouseenter', 
        function(event){ 
           $(event.target).css('background-color', 'yellow');
      });
      $('.header_innerHeaderDivs').bind('mouseleave', 
        function(event){ 
           $(event.target).css('background-color', 'blue');
      });
     </script>

Я бы не поместил его в тег скрипта в середине вашего html-файла, как в блоке кода (лучше в js-файле), но вы поняли идею. Я бы предпочел использовать чистый CSS сам, но это вариант.

0 голосов
/ 28 мая 2010

Если вы переключите тип документа на XHTML переходный или выше, он будет работать. Он также может работать со строгим HTML, хотя я этого не пробовал. Как правило, вы хотите использовать теги a для наведения, если только вы не диктуете действие через обработчик js даже.

0 голосов
/ 28 мая 2010

Работает в Safari. Вы тестируете в IE, где :hover работает только на a элементах?

РЕДАКТИРОВАТЬ: я тестировал в Firefox, и он там не работает (хотя работает в Opera). Использование div.header_innerHeaderDivs исправляет это ... Может быть, вы не можете использовать псевдо-селекторы только на классах? Это правда, хотя; может быть ошибка браузера.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...