Not having any luck with :hover, either with jquery or css

Question

Neither seem to work right for me. Starting with query:

<script>
$(function() {
$("#button1").hover(function() {
$("#button1").animate({opacity: 0.5}, 500);
});
});
</script>

This causes the opacity to shift down, but it doesnt resume on mouseleave. Jquerys hover page says to put a in and out action like so:

.hover( handlerIn(eventObject), handlerOut(eventObject) )

so when i do this it just gives me both animations on mouse in and again on mouseout:

<script>
$(function() {
$("#button1").hover(function() {
$("#button1").animate({opacity: 0.5}, 500),
    $("#button1").animate({opacity: 1}, 500);
});
});
</script>

So i gave up on that and tried mouseenter/mouseleave combo:

<script>
$(function() {
$("#button1").mouseenter(function() {
$("#button1").animate({opacity: 0.5}, 500); 
});
("#button1").mouseleave(function() {
$("#button1").animate({opacity: 1}, 500);
});
});


</script>

It just sticks on the mouseenter animation. So i tried the css method:

<style>
a:hover {
opacity: 0.5;
}
</style>
<div>
<a id="button1" ><img src="Assets/button.png"></a>
</div>

Doesnt do jack. :shrug:

score 0 · Answer 1 · answered Apr 28 '12 at 05:49

0

Try passing in the hover handlers in separate functions, like this:

$(function() {
    $("#button1").hover(function() {
        $("#button1").animate({
            opacity: 0.5
        }, 500);
    }, function() {
        $("#button1").animate({
            opacity: 1
        }, 500)
    });
});

answered Apr 28 '12 at 05:49

Elliot Bonneville

51,872
23
96
123

This doesnt work. I have this script posted at the bottom of the body, below the button element, could that cause a problem? Im using jquery 1.7.2 in FF11, maybe one of them broke the :hover and :mouseenter/leave function? – user1361747 Apr 28 '12 at 23:03
Only if it's not embedded in a ` – Elliot Bonneville Apr 28 '12 at 23:04
no, its in a script tag. Is this working for you? This is my code: – user1361747 Apr 28 '12 at 23:05

score 0 · Answer 2 · answered Apr 28 '12 at 05:57

0

I don't use jQuery, but the CSS example you've provided works perfectly for me. I just copied code from the example and swapped the image with one of my own.

Consider checking whether your browser (it's version) fully supports opacity. I'm using Firefox 12.0

answered Apr 28 '12 at 05:57

Atheus

94
1
7

This is my entire markup in a new page, nothing happens (posting head and body separately) ` Untitled Document ` – user1361747 Apr 29 '12 at 17:02
` – user1361747 Apr 29 '12 at 17:03

score 0 · Accepted Answer · answered Apr 30 '12 at 04:32

nm, i give up. The only way ive gotten mouse events to work is by putting it directly within the element (onmouseup: onmousedown: etc...). I did get a:hover to work finally but theres no way to animate it without cutting out ie9 and below, so thats out of the question. At least theres a solution, no thanks to jquery.

Not having any luck with :hover, either with jquery or css

3 Answers3