Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > hover для div в IE

Автор: alex77 10.3.2007, 10:35

Здравствуйте.
Как проще можно сделать, чтобы в IE при наведении курсора мыши на div у него менялся цвет фона?
<div onmouseover="..." onmouseout="..."> не подходит.
пока нашел такую реализацию

Код


<!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>
<style type="text/css">
div
{
    width: 200px;
    height: 200px;
    background: #ccf;
    behavior: url('h.htc')
}
div:hover
{
    width: 200px;
    height: 200px;
    background: #cfc;
}
</style>
<title>
IE hover
</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />
</head>
<body>
<div>
IE hover
</div>
</body>
</html>

Файл h.htc

Код


<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="Hilite()" />
<PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="Restore()" />
<script LANGUAGE="JScript">
  var normalColor, normalSpacing;
  function Hilite()
  {
    runtimeStyle.background = "#cfc";
  }
  function Restore()
  {
    runtimeStyle.background = '#ccf';
  }
</SCRIPT>
</PUBLIC:COMPONENT>

Автор: S.A.P. 10.3.2007, 10:52

hover в IE работает только для ссылок с непустым атрибутом href. Можно капнУть в эту сторону, например проставить для ссылки display:block, чтобы эмулировать блочный элемент.

Автор: Sardar 10.3.2007, 17:40

С единственным но, http://validator.w3.org вряд ли согласиться с такой вёрсткой smile

С другой стороны это ИМХО лучше чем onmouseover/onmouseout.

Автор: SelenIT 11.3.2007, 03:44

Sardar, имхо, согласится, если внутри будут одни формально разрешенные span-ы (а не div-ы) и т.д. По крайней мере, с http://www.snovidovo.ru/types.html (из моей молодости;) вроде бы соглашается...

Автор: AKS 11.3.2007, 09:08

Цитата(SelenIT @ 11.3.2007, 03:44

)

с примером ... вроде бы соглашается

А почему бы и не согласиться? Внутри <a> много чего допустимо:

Код


<a href='' title=''>
    <big></big>
    <b></b>
    <small></small>
    <em></em>
    <strong></strong>
    <code></code>
    <img src='' alt='' />
    <br />
    <span></span>
    <textarea rows='2' cols='2'></textarea>
    <label></label>
    <input type='text' />
    <button></button>
    <script src='' type='text/javascript'></script>
    <select>
        <option></option>
    </select>
</a>

- все в норме (XHTML 1.1). Можно еще чего-нибудь внутрь добавить - только лень. ;)
Но все же с behavior получится более гибкая конструкция, чем если бы div'ы заменять на тэг a, разве не так?

Код


<public:component lightweight='true'> 
<public:attach event='onmouseover' handler='Hilite' />
<public:attach event='onmouseout' handler='Hilite' />
<script type='text/jscript'>
/*<![CDATA[*/
function Hilite(){
    runtimeStyle.backgroundColor =
        (window.event.type == 'mouseover') ? '#cfc' : '#ccf';
}
/*]]>*/
</script>
</public:component>

Автор: Sardar 12.3.2007, 11:07

Цитата(SelenIT @ 11.3.2007, 02:44

)

если внутри будут одни формально разрешенные span-ы

На что только не идут верстальщики, что бы лишний раз не использовать JS. Правда наглядней когда оно стилями, жаль парни из W3C очень медленно доходят до того, что народу нужно smile

Автор: alex77 13.3.2007, 07:16

Так оставлю:

Код


<public:component lightweight='true'> 
<public:attach event='onmouseover' handler='Hilite' />
<public:attach event='onmouseout' handler='Hilite' />
<script type='text/jscript'>
/*<![CDATA[*/
function Hilite(){
    runtimeStyle.backgroundColor =
        (window.event.type == 'mouseover') ? '#cfc' : '#ccf';
}
/*]]>*/
</script>
</public:component>

Видимо более оптимально не сделать.
Всем спасибо.

Автор: 12345c 13.3.2007, 15:52

Делают ещё через стиль с behavior. Тоже скрипт, только во внешнем файле и вызывается из стиля. http://js2.ru/example/JsPrimeryCode-43.htm

Добавлено @ 15:53
(подсветка текста, но меняется, естественно, на что угодно)