Using not in jquery

Question

I am trying to add opacity to a div which contains anchor tag,image, caption(span) .

On hovering of caption i want to show my caption only making all of div blur... So i had used not like this

$(this).not('.Caption').css('opacity', '0.4');

my body is like

<div>
    <a href="#"><img src=""/></a>
    <span class='Caption'>caption</span>     
</div>

See my fiddle for better understanding..FiDDle

UPDATE: Actually i am trying to implement like the last demo in Plugin , lastly i ended like the fiddle above

@Satpal - you're sure that was a valid edit? Perhaps the OP doesn't really have a class attribute for that span element... — Lix
– Lix, Commented Jul 22, 2014 at 8:03
@Lix, Yes that was valid edit, OP has provided fiddle. Its mentioned there. — Satpal
– Satpal, Commented Jul 22, 2014 at 8:04

Amin Jafari · Accepted Answer · 2014-07-22 08:09:03Z

1

you mean like this? => http://jsfiddle.net/ggLG8/6/

$('.thumbnail').hover(function() {
      $(this).children().not('.Caption').css('opacity', '0.4');
},function(){
    $(this).children().not('.Caption').css('opacity', '1');
});

also you have to remove the opacity:0.4; from the .thumbnail:hover in CSS

edited Jul 22, 2014 at 8:09

answered Jul 22, 2014 at 8:01

Amin Jafari

7,2153 gold badges21 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tim B James Over a year ago

This doesn't do anything.

Amin Jafari Over a year ago

@TimBJames check out the fiddle, the .Caption opacity is not changing, but the rest are!

Amin Jafari Over a year ago

@user3860465 okay, I did, but I don't see a "caption"

Amin Jafari Over a year ago

@user3860465 oh I got it, you mean you wanna make it look like this => jsfiddle.net/ggLG8/9

user3860465 Over a year ago

thanx..i really appreciate u..still i am confusing in jquery..certain options for only certain situations..:)

|

Milind Anantwar · Accepted Answer · 2014-07-22 08:01:00Z

0

You can use:

$(this).find('*').not('.Caption').css('opacity', '0.4');

This would set the opacity to all the child elements except one with class Caption.

answered Jul 22, 2014 at 8:01

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Comments

Farrokh · Accepted Answer · 2014-07-22 08:03:44Z

0

this happend because ".caption" element is inside of your "Div"
try this:

<div class="someclass">
<div class="thumbnail" >
<a class="fancybox" href="http://demo.phpgang.com/crop-images/demo_files/pool.jpg" rel="group1">
    <img width="150" height="120" src="http://demo.phpgang.com/crop-images/demo_files/pool.jpg"/>
</a>
    </div>
    <span class='Caption' contenteditable='true'>Caption</span>
</div>

answered Jul 22, 2014 at 8:03

Farrokh

1,1771 gold badge7 silver badges18 bronze badges

Comments

Tim B James · Accepted Answer · 2014-07-22 08:14:03Z

0

The problem isn't your jQuery, but because you are applying opacity to an element that contains other elements. When you do this, all the elements within the containing element inherit the opacity.

The simplest solution would be to remove the opacity and just change the background color of the .thumbnail element, and remove the opacity from the css style.

$('.thumbnail').hover(function() {
      $(this).not('.Caption').css('background-color', 'rgba(249, 160, 160, 0.4)');
      $(this).find('.Caption').animate({
          opacity: 'show',
          bottom: 0
      }, 'fast');    
});

See this updated fiddle

answered Jul 22, 2014 at 8:14

Tim B James

20.4k4 gold badges77 silver badges108 bronze badges

Collectives™ on Stack Overflow

Using not in jquery

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related