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

Ответ 1

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

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

IE предоставляет mouseenter и mouseleave, с которыми гораздо проще работать, потому что они не пузырятся, но (конечно) IE-специфичны. Они настолько удобны, что фреймворки начинают поддерживать их даже в браузерах, которые этого не делают; Prototype и 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
$$(".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: В обоих случаях я использовал анонимные встроенные выражения функций, чтобы избежать создания впечатления, которое вы должны использовать именованными функциями. Однако я всегда рекомендую использовать именованные функции в производственном коде.)

Ответ 2

Нет.

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

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

Ответ 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>

или если у вас есть конкретный якорь, просто измените селектор

Ответ 4

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

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

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

Ответ 5

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

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

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

Ура!