Adding css to jquery children elements

Question

I am trying to make a popup which would display on mouse hover by using jquery and some css. The code works as it should, however i can't add any CSS to the child elements of the popup window for some reason.

Here's the jquery code:

  $(document).ready(function(){

    var $popup = $('.popup');
    $('area').on({
      mouseover : function(e){
        var $this = $(this),
            $obj = $('#'+$this.prop('alt'));
        $popup.text($obj.text()).css({
          top: '90%',
          left: '24.8%',
          color: 'orange',
          }).show();
      },
      mouseout: function(){
        var $this = $(this),
            $obj = $('#'+$this.prop('alt'));          
        $popup.hide(0).empty();
      }
    });
    });

And here's the popup html code containing what is displayed in the popup. Nothing happens when i try to add the css to the classes displayed inside popup.

<div class="stanovanje" id="n1s1">
<h2>Področje 1</h2>
  <div class="koda">Koda:<br><p>1-12-123-S1</p></div><div class="tip">Tip:<br><p>A1</p></div><div class="povrsina">Površina:<br>84.24m</div> <div class="vrsta">Vrsta:<br>z balkonom/teraso</div><div class="cena">Cena:<br>120000€</div>
</div>
<div class="stanovanje" id="n1s2">
  <div class="koda">Koda:<br><p>1-12-123-S2</p></div><div class="tip">Tip:<br><p>A2</p></div><div class="povrsina">Površina:<br>74.24m</div> <div class="vrsta">Vrsta:<br>z balkonom/teraso</div><div class="cena">Cena:<br>140000€</div>
</div>
<div class="popup"></div>

Thanks for reading and all the answers!

If that is all the CSS there is, setting top and left won't do anything; those only work for positioned elements. — Mr Lister
– Mr Lister, Commented Nov 11, 2013 at 9:22
After term orange remove the comma.it was throwing errors.I did find area you are specifying. — MaheshMajeti
– MaheshMajeti, Commented Nov 11, 2013 at 9:25

Mujtaba Haider · Accepted Answer · 2013-11-11 10:25:02Z

1

top or left props would work with positioned elem Update 2: I hope It will work this way

JS

var $popup = $('.popup');   
$popup.html($obj.html());
$('.popup div').css({
    top: '90%',
    left: '24.8%',
    color: 'orange',
position: 'relative' //absolute
});
$popup.show();

edited Nov 11, 2013 at 10:25

answered Nov 11, 2013 at 9:48

Mujtaba Haider

1,6502 gold badges19 silver badges29 bronze badges

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

5 Comments

risha riss Over a year ago

Yes but this will position the whole popup window. I want to position elements inside the popup beacause they are now displayed as one line of text. I added divs with classes to separate parts of text, as u can see in first post, but they dont get affected by CSS which i add to them.

risha riss Over a year ago

The popup gets displayed on mouse hover, but its empty as there is no content inside it anymore.

risha riss Over a year ago

Yes, text is inside div if that is what you mean? This is the text that should get displayed in the popup: <div class="stanovanje" id="n1s2"> <div class="koda">Koda:<br><p>1-12-123-S2</p></div><div class="tip">Tip:<br><p>A2</p></div><div class="povrsina">Površina:<br>74.24m</div> <div class="vrsta">Vrsta:<br>z balkonom/teraso</div><div class="cena">Cena:<br>140000€</div> </div> As you can see that text is made of several divs with classes, but those divs dont get affected by any CSS code, instead they are displayed as one line of text.

Mujtaba Haider Over a year ago

Just updated again. You should apply CSS on div inside popup, instead of on popup

risha riss Over a year ago

Your last update solved everything, thank you very much good sir!

Jonathan · Accepted Answer · 2013-11-11 09:24:47Z

0

You have wrong code too, you need to remove last comma:

$popup.text($obj.text()).css({
    top: '90%',
    left: '24.8%',
    color: 'orange',
}).show();

Should be:

$popup.text($obj.text()).css({
    top: '90%',
    left: '24.8%',
    color: 'orange'
}).show();

answered Nov 11, 2013 at 9:24

Jonathan

7738 silver badges22 bronze badges

1 Comment

risha riss Over a year ago

Thanks for noticing, but it didnt help me with adding CSS to the elements inside the popup, not the popup itself.

Collectives™ on Stack Overflow

Adding css to jquery children elements

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related