как работает событие onss mouseover - PullRequest
Новая
       20

как работает событие onss mouseover

1 голос
/ 10 мая 2011

обновление - извините, ребята, я должен был предоставить ссылку на сайт, где я увидел эффект.здесь вы идете - http://www.w3schools.com/Css/css_image_transparency.asp

и код, который я там увидел (и основа этого вопроса), как показано ниже - 

    <img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Оригинальный вопрос как ниже-

Я искал эффекты прокрутки, которые можно было бы сделать без использования JS, и наткнулся на веб-сайт w3schools, где рассказывается о настройке непрозрачности для изображений.В коде нет js, это просто чистый CSS.

Я даже пытался использовать тот же код на моей веб-странице (на которой пока нет js), и я заметил, что код отлично работает как в Chrome, так и в IE 7.0.в коде есть событие «onmouseover» и другое событие «onmouseout» для предоставления эффектов наведения на основе настроек непрозрачности.

интересно, являются ли эти эффекты (onmouseover и onmouseout) - 1. pure css 2. совместимыми со стандартами(xhtml 1+ и css2) 3. есть ли причастные к этому хаки

Я до сих пор не могу поверить, что все это работает на ie7, и удивляюсь, почему нет документации по этим событиям.

Ответы [ 4 ]

3 голосов
/ 10 мая 2011

В CSS нет такого события или атрибута onmouseover, это JavaScript. CSS использует псевдокласс ": hover" для наведения мыши на события. Быстрый пример,

HTML: 

<div id="someid">I'm a random div.</div>

CSS: 

#someid {
    background: #fff;
}

#someid:hover {
    background: #000;
}

В этом примере, когда вы наводите курсор на элемент #someid, его фон меняется с белого на черный.

Это правильный способ обработки мыши над событиями в CSS. Он соответствует стандартам и будет работать во всех современных браузерах (а также в некоторых старых браузерах).

Sidenote: Это не всегда работает в IE6, IE6 распознает псевдокласс ": hover" только в том случае, если он применяется к тегам привязки ("a: hover" и т. Д.).

На основании обновления вашего вопроса : 

<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

То есть использует JavaScript для изменения стиля. Единственный фрагмент этого, который является CSS - это часть style='...'. Текст в onmouseover и onmouseout - это JavaScript.

Чтобы делать то, что вы хотите в чистом CSS, это должно быть так, 

<html>
<head>
    <style>
    img.opacity-image {
        opacity: 0.4;
        filter:alpha(opacity=40); /* This is IE specific and NOT standards complaint */
    }

    img.opacity-image:hover {
        opacity: 1;
        filter:alpha(opacity=100); /* Again, 'filter:' is IE specific. */
    }
    </style>
</head>
<body>
    ...
    <img src="klematis.jpg" class="opacity-image" />
    ....
</body>
</html>

opacity - это CSS3 и поддерживается только современными браузерами (IE6,7,8 не поддерживает его). Вы можете использовать filter:... для обеспечения прозрачности для работы в IE (хотя он не будет правильно обрабатывать PNG, но поскольку вы используете JPG, это не проблема), но тогда ваш код технически не соответствует стандартам как "filter "не входит в стандарт CSS. Как правило, это не имеет большого значения, поскольку все равно будет корректно отображаться в любом современном браузере.

2 голосов
/ 10 мая 2011

Я предполагаю, что вы говорите о событии: hover? 

<div id="hoverDiv"> Something should happen when you hover on me</div>

Стиль: 

#hoverDiv:hover{ background-color:red; }

Визуальный пример: http://jsfiddle.net/zRnug/

Всеэффекты наведения, которые вы хотите добавить в свою таблицу стилей в области # selector :hover {}.

Все эффекты, которые вы хотите использовать ранее (стиль элемента по умолчанию), просто используйте их внутри #selector {}область.

1 голос
/ 10 мая 2011

CSS поддерживает селектор :hover, который срабатывает, когда вы наводите курсор мыши на элемент. 

.mydiv {background-color:red;}
.mydiv:hover {background-color:blue;}

Любое свойство CSS может быть изменено при наведении мыши с помощью селектора :hoverтаким образом.

Непрозрачность - это функция CSS3.Он поддерживается большинством браузеров, но IE8 и ниже не поддерживают его.У них есть альтернативный способ сделать это (используя специфичное для IE свойство filter);это сложнее, чем стандартный CSS, и его сложнее понять, но это можно сделать.

Имейте в виду, что IE6 и ниже поддерживает только :hover для <a> элементов.Другие браузеры (включая IE7 и выше) поддерживают его для всех элементов.Мой совет - просто не поддерживать IE6 на вашем сайте, но если вам это нужно, есть хаки для него, которые могут заставить :hover работать правильно.

1 голос
/ 10 мая 2011

Это встроенные обработчики событий Javascript.

Вы можете сделать это в чистом CSS, используя селектор :hover.

...