Вызов JavaScript из функции из CSS

Question

Можно ли как-нибудь вызвать мою функцию JavaScript из css?

Например, вот стиль:

.first-nav li a:hover,
.first-nav li.hover a {
    margin:-3px 0 -1px;
    height:30px;
    position:relative;
    background:url(../images/nav-hover.jpg) no-repeat;
}

и я хочу вызвать функцию JS при наведении курсора.

Answer 1

Нет, вы не можете напрямую запускать JavaScript из CSS.

То, что вы можете сделать, - это использовать селекторы CSS, чтобы найти элементы, которые вы хотите просмотреть таким образом, а затем отслеживать события мыши. Стандартными событиями являются mouseover и mouseout, но с ними может быть немного сложно работать, потому что они всплывают (например, вы получаете mouseout всякий раз, когда мышь покидает какой-либо элемент-потомок). Однако, с соответствующей логикой, с ними не так уж плохо работать, и на самом деле, если у вас их много, вы, вероятно, захотите использовать mouseover и mouseout, а не альтернативу ниже, потому что вы можете установить их на родительский контейнер, а затем определите, какой дочерний элемент задействован, что в некоторых случаях может быть проще (а в других - сложнее).

IE предоставляет mouseenter и mouseleave, с которыми гораздо проще работать, потому что они не всплывают, но (конечно) специфичны для IE. Это настолько удобно, что фреймворки начинают поддерживать их даже в браузерах, которые этого не делают; Например, Прототип и jQuery предоставляют их, и я не был бы слишком удивлен, если бы некоторые другие фреймворки так же поступали. jQuery также предоставляет удобную функцию hover, которая будет очень близка к тому, что вы хотите:

// jQuery
$(".first-nav li a").hover(
    function(event) {
        // The mouse has entered the element, can reference the element via 'this'
    },
    function (event) {
        // The mouse has left the element, can reference the element via 'this'
    }
 );

... что на самом деле просто ярлык для настройки обработчиков mouseenter и mouseleave, но все же, удивительно лаконично.

В Prototype это очень похоже:

// Prototype
$$(".first-nav li a")
    .invoke("observe", "mouseenter", function(event) {
        // The mouse has entered the element, can reference the element via 'this'
    })
    .invoke("observe", "mouseleave", function(event) {
        // The mouse has left the element, can reference the element via 'this'
    });

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

Answer 2

Нет.

(Ну, Microsoft Expressions и Mozilla Bindings могли бы разрешить это, но оба являются собственностью и их следует избегать)

Назначьте обработчики событий из JavaScript. Такие библиотеки, как YUI и jQuery, позволяют вам выбирать элементы, чтобы применять их к CSS-селекторам. Делегирование событий позволяет обрабатывать события в элементах без необходимости явно назначать каждому из них (что удобно, если вы добавляете их в документ после его загрузки).

Answer 3

Зачем вам вызывать его из css, если вы хотите "вызвать функцию JS при наведении курсора", поместите это в свой тег:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("a").hover(function(){
        myFunctionInvoke();
    });
});
</script>

или, если вы имеете в виду конкретную привязку, просто измените селектор

Answer 4

На самом деле. Да, ты можешь. Просто используйте javascript: в background-url вот так:

<STYLE type="text/css">BODY{background:url("javascript:yourFunction();")}</STYLE>

Не совсем уверен, что это сработает.

ура!

Answer 5

Потому что более логично сделать это из CSS.

Если кто-то хочет, чтобы ссылки нажимали при наведении курсора, это эстетическое качество и должно обрабатываться с помощью CSS Например:

#header_menu li a:hover{
    color:white;
    js:click();
}