Having trouble changing opacity when hovering over a floated div

1 Views

I’ve made a JS Fiddle here which is working correctly, however it is not workingin my development site.

http://jsfiddle.net/yr7rmho0/

Read More

Site is running WordPress, and the link above contains a condensed version of what’s on my site.

Basically, I have a WordPress sidebar item, wrapped in <li> tags. I am adding a class to this tag to make it float int he bottom left hand corner when scrolled.

I want to set the opacity to .25 in the CSS, and make it appear full opacity when hovered. My problem is, that on the development site, when hovering, no opacity changes are being made. The div is the most upper layer, as I can click and interact with it. 

$('#request-consultation.fixed-bottom-left').hover(
    function() { $( this ).fadeTo( 'fast', '1'); },
    function() { $( this ).fadeTo( 'slow', '.25'); }
);

I don’t understand why it’s not working on the site, but it is in JS Fiddle?

UPDATE:

I’ve noticed that if I change the code above to just be the ID, it works okay, but it also affects when the sidebar element is not floated (I’ve got a script that adds the fixed-bottom-left class when scrolled). If I use the class, nothing happens.

So, the ID of the widget works, and the class of widget-container works on all the sidebar widgets. But if I just choose fixed-bottom-left as a class on it’s own, nothing happens. I believe it’s this class that’s the issue. But why?

Post Views: 1

Related posts

1 comment

  1. Why not use CSS?

    #request-consultation.fixed-bottom-left {
    opacity:.25;
    transition:all 0.3s linear;
}
#request-consultation.fixed-bottom-left:hover{
    opacity:1;
    transition:all 1s linear;
}

    UPDATE
    For older browser

    #request-consultation.fixed-bottom-left {
    opacity:.25;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
#request-consultation.fixed-bottom-left:hover{
    opacity:1;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

Comments are closed.