javascript child element css

Question

I have two classes set in css .dragbox and .removebutton

the .dragbox is a div and the .removebutton is an button within the div

I have multiple dynamically created .dragbox's on the page.

how do I make the .removebutton of only that current .dragbox visible with javascript?

currently when I hover over one .dragbox, all the .removebuttons become visible for all .dragbox's. I only want the current one to show up

heres the css

.dragbox
 {
  position:absolute;
  width:10px;
  height:25px;
  padding: 0.0em; 
  margin:25px;    
  }

 .removebutton
{
      background-image:url(img/delete.png); 
      background-repeat:
      no-repeat;visibility:hidden;
}

and heres the javascript

   $('.dragbox').hover(function() 
  { 
    $(this).css('border', '1px solid #000');     
    $(this).css('background-image','url(img/move.png)');
    $(this).css('background-repeat','no-repeat');
    $(this).css('width', '15px');
    $(this).css('height', '15px');          
        $(".removebutton").css('visibility', 'visible'); 
   });

MassivePenguin · Accepted Answer · 2013-03-26 10:42:05Z

2

Try:

$('.dragbox').hover(function() 
{ 
    $(this).css('border', '1px solid #000');     
    $(this).css('background-image','url(img/move.png)');
    $(this).css('background-repeat','no-repeat');
    $(this).css('width', '15px');
    $(this).css('height', '15px');          
    $(this).find(".removebutton").css('visibility', 'visible');
});

Your original code will find every instance of .removeButton on the page. The above code will target the .removeButton that's part of the currently-hovered .dragbox div.

answered Mar 26, 2013 at 10:42

MassivePenguin

3,5194 gold badges30 silver badges48 bronze badges

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

1 Comment

Barry Watts Over a year ago

just have told me I had to wait 4 mins before i could accept it

Prashobh · Accepted Answer · 2013-03-26 10:46:40Z

2

no need to repeat (this) also

 $('.dragbox').hover(function() 
      { 
        $(this).css({
       border :'1px solid #000'    ,
       background-image:'url(img/move.png)',
       background-repeat:'no-repeat',
       width: '15px',
       height: '15px'
    })
            $(this).find('.removebutton').css('display', 'block');or /*visibility:visible*/
       });

answered Mar 26, 2013 at 10:46

Prashobh

9,58415 gold badges65 silver badges92 bronze badges

Collectives™ on Stack Overflow

javascript child element css

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related