CODEWITHSUNDEEP
jquery
Craig Ward
Craig Ward

Reputation: 2485

jquery onHover capture a css value from a click event?

I have the following code that I am trying to implement which you can see on jsbin

http://jsbin.com/uvetaw/5

How can I make it so that opacity is always 1 if a link is clicked in an article that was opacity 0.5 when hovered into it?

Upvotes: 1

Views: 125

Answers (2)

Kyle Macey
Kyle Macey

Reputation: 8154

Append, toggle, or remove classes with a hierarchy
The question is kinda vague, so I hope this helps.

.hovered-div {
  opacity: 0.5
}

.clicked-div {
  opacity: 1;
}

Update

Javascript:

$("article").hover(
    function () {
      $(this).removeClass('hovered', 1000);
    },
    function () {
      $(this).addClass('hovered', 1000);
    }
  );

$('a[rel="article"]').click(function() {
  $('.clicked').removeClass('clicked', 1000);
  $(this).parents('article').addClass('clicked', 1000);
});

CSS:

.hovered {opacity:0.5}
.clicked {opacity:1 !important}

Use jQueryUI to support the transitions.

Upvotes: 2

GregM
GregM

Reputation: 2654

You can try to remove the hover in the click event like this : 

$(".open").unbind('mouseenter').unbind('mouseleave');

or this :

$(".open").unbind('mouseenter').off('hover');

Upvotes: 0

Related Questions