Calling JavaScript from function from CSS
Is there any way that I can call my JavaScript function from css?
For ex here is style:
.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;
}
and I want to call a开发者_开发知识库 JS function on anchor hover.
No, you can't trigger JavaScript from CSS directly.
What you can do is use CSS selectors to find the elements you want to watch in this way, and then watch for mouse events. The standard events are mouseover and mouseout, but they can be a bit tricky to work with because they bubble (you get mouseout, for instance, whenever the mouse leaves any descendant element). With appropriate logic, though, they're not to bad to work with, and in fact if you have lots of these, you probably want to use mouseover and mouseout rather than the alternative below because you can set them on just a parent container and then work out which descendant element is involved, which can be simpler in some cases (and more complicated in others).
IE provides mouseenter and mouseleave which are much easier to work with because they don't bubble, but (of course) IE-specific. These are so handy that frameworks are starting to support them even in browsers that don't; Prototype and jQuery provide them, for instance, and I wouldn't be too surprised if some other frameworks do as well. jQuery also provides the handy hover function, which would be very close to what you want:
// 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'
}
);
...which is really just a shortcut for setting up mouseenter and mouseleave handlers, but still, wonderfully concise.
In Prototype it's quite similar:
// 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: In both cases, I've used anonymous inline function expressions just to avoid giving the impression you have to use named functions. I always recommend using named functions in production code, though.)
No.
(Well, Microsoft Expressions and Mozilla Bindings might allow it, but both are proprietary and should be avoided)
Assign your event handlers from JavaScript. Libraries such as YUI and jQuery allow you to pick elements to apply them to using CSS selectors. Event delegation allows you to handle events on elements without having to assign to each one explicitly (which is handy if you are adding them to the document after it loads).
You can call it from javascript(it does the same thing). Below is the code on how to do it on 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>
or if you have particular anchor in mind just change the selector
Because it's more logical to do it from CSS.
If one wants to make links click on hover, it's an aesthetic quality and should be handled with CSS. For example:
#header_menu li a:hover{
color:white;
js:click();
}
It's both an aesthetic quality and, as such, it should be handled with CSS and a functional quality which should, as such, be handled with html and javascript.
And there is a very simple way to call a function on page load from within html:
<body onload="myFunction()">
Actually. Yes you can. Just use javascript: in the background-url like this:
<STYLE type="text/css">BODY{background:url("javascript:yourFunction();")}</STYLE>
Not entirely sure if this will work though.
Cheers!
加载中,请稍侯......
精彩评论