CSS: наведении не работает

<!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.3CSS: наведении не работает

источник

2010-05-28 Babiker

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

D_N: hover не влияет на (по крайней мере) Firefox. Скотт: Я попытался удалить дисплей: встроенный, и это ничего не изменило. Похоже, что это проблема с селектором. –

если это нав бар, то лучше всего использовать список ссылок (его более семантический, что путь), чтобы ваше парение также работает в 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» как часть имени класса. это не так полезно/описательно в семантике :)

источник

2010-05-28 03:05:54 corroded

Я нашел слово «семантика» запутанным в течение очень долгого времени, даже когда я посмотрел определение. Почему мы не можем просто использовать слово «маркировка», «присвоение класса» или что-то подобное? –

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

EDIT: Я тестировал в Firefox, и он там не работает (работает в Opera, хотя). Использование div.header_innerHeaderDivs исправляет это ... Может быть, вы не можете использовать псевдоселекторов только для классов? Это действительно правда; может быть ошибкой браузера.

источник

2010-05-28 03:02:03

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

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

EDIT:

Если вы хотите, чтобы родительский DIV расширить набор отображения .header_innerHeaderDivs встраивать-блок. Кроме того, как уже упоминалось выше, вы можете установить заявление ОТД на:

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

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

источник

2010-05-28 03:04:29 edl

Это работает, но вместо расширения #headerDiv вместе с дополнением он расширяет внутренние div только так, как если бы они имели более высокий z-индекс. – Babiker

Я думаю, что встроенный блок не работает в IE. Может быть, неправильно. –

@crimson_penguin Я думаю, что вы правы. Ну IE6 и IE7 в любом случае. Я думаю, что IE8 поддержит это. – edl

Если вы переключите doctype на XHTML-переход или выше, он работает. ИТ также может работать с HTML строго, но я этого не делал. Как общий ruel, хотя вы хотите использовать теги a для зависаний, если вы не продиктовываете действие с помощью js even handler.

источник

2010-05-28 03:07:24 prodigitalson

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

EDIT: Non-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 самостоятельно, но это вариант.

источник

2015-01-07 22:18:27 nurdyguy

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

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

И тогда CSS

.hoverChange :hover{ 
    padding: 4px; 
}

источник

2016-11-03 12:42:27 edo4hy

CSS: наведении не работает

ответ

Смежные вопросы