My goal is to create a popup that appears upon mouse hover using jQuery and CSS. The code functions properly, but I'm encountering difficulty adding CSS to the child elements within the popup window.
Below is 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();
}
});
});
Here is the HTML code for the popup which displays the contents inside it. When attempting to apply CSS to the classes within the popup, nothing happens.
<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>
Thank you for taking the time to read this, any help or suggestions are appreciated!