Javascript 向jquery子元素添加css

Javascript 向jquery子元素添加css,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试使用jquery和一些css制作一个弹出窗口,它将显示在鼠标悬停时。代码正常工作,但是由于某些原因,我无法向弹出窗口的子元素添加任何CSS 以下是jquery代码: $(document).ready(function(){ var $popup = $('.popup'); $('area').on({ mouseover : function(e){ var $this = $(this), $obj = $

我正在尝试使用jquery和一些css制作一个弹出窗口,它将显示在鼠标悬停时。代码正常工作,但是由于某些原因,我无法向弹出窗口的子元素添加任何CSS

以下是jquery代码:

  $(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();
      }
    });
    });
下面是弹出的html代码,包含弹出窗口中显示的内容。当我尝试将css添加到弹出窗口中显示的类时,什么也没有发生

<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>

波德罗切耶1号
科达:
1-12-123-S1

提示:
A1

Površina:
84.24米瓦斯塔:
z巴尔科诺姆/特拉索塞纳:
120000欧元 科达:
1-12-123-S2

提示:
A2

Površina:
74.24米瓦斯塔:
z巴尔科诺姆/特拉索塞纳:
14万欧元

谢谢你的阅读和所有的答案

您的代码也错误,需要删除最后一个逗号:

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

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

顶部或左侧的道具将与定位元素一起使用 更新2:我希望它能以这种方式工作

JS


你的区域标记在哪里?正如你在点击
$('area')
时定义的那样,它在哪里?如果这就是所有的CSS,设置
顶部
左侧
将不会起任何作用;这些仅适用于定位元素。您是否能够使用$popup.text($obj.text())添加文本?在术语橙色后删除逗号。它引发了错误。我确实找到了您指定的区域。感谢您的注意,但它没有帮助我向弹出框内的元素添加CSS,不是弹出窗口本身。是的,但这将定位整个弹出窗口。我想在弹出窗口中定位元素,因为它们现在显示为一行文本。正如你在第一篇文章中看到的那样,我添加了带类的div来分隔文本的各个部分,但它们不会受到我添加到它们中的CSS的影响。弹出窗口会在鼠标悬停时显示,但它是空的,因为里面再也没有内容了。是的,文本在div里面,如果这是你的意思?这是应该在弹出窗口中显示的文本:Koda:
1-12-123-S2

提示:
A2

Površina:
74.24m Vrsta:
z balkonom/terasoCena:
140000欧元,正如您可以看到的那样,文本是由几个带类的div组成的,但是这些div不会受到任何CSS代码的影响,相反,它们显示为一行文本。只是再次更新。您应该在弹出窗口内的div上应用CSS,而不是在弹出窗口上。您上次的更新解决了所有问题,非常感谢您,先生!
var $popup = $('.popup');   
$popup.html($obj.html());
$('.popup div').css({
    top: '90%',
    left: '24.8%',
    color: 'orange',
position: 'relative' //absolute
});
$popup.show();