Добавление css в дочерние элементы jquery

0

Я пытаюсь сделать всплывающее окно, которое будет отображаться при наведении мыши, используя 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 popup, содержащий то, что отображается во всплывающем окне. Ничего не происходит, когда я пытаюсь добавить 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
    где ваш тег области, как вы определили это при клике
  • 0
    $('area') где это?
Показать ещё 10 комментариев
Теги:

2 ответа

1
Лучший ответ

верхний или левый реквизит будет работать с позиционированным элементом Обновление 2: я надеюсь, что он будет работать таким образом

JS

var $popup = $('.popup');   
$popup.html($obj.html());
$('.popup div').css({
    top: '90%',
    left: '24.8%',
    color: 'orange',
position: 'relative' //absolute
});
$popup.show();
Поделиться
  • 0
    Да, но это будет позиционировать все всплывающее окно. Я хочу расположить элементы внутри всплывающего окна, потому что они теперь отображаются в виде одной строки текста. Я добавил div с классами в отдельные части текста, как вы можете видеть в первом посте, но они не зависят от CSS, который я добавляю к ним.
  • 0
    Только что обновил мой ответ. Надеюсь, что это будет бум
Показать ещё 4 комментария
0

У вас тоже неправильный код, вам нужно удалить последнюю запятую:

$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();
Поделиться
  • 0
    Спасибо, что заметили, но это не помогло мне с добавлением CSS к элементам внутри всплывающего окна, а не к самому всплывающему окну.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню