Управляйте CSS через JavaScript или jQuery

Question

Управляйте CSS через JavaScript или jQuery

0

Я ищу способ управления CSS для определенного элемента при наведении. Поскольку это не элемент непосредственно в родительском роде, я не могу использовать CSS.

<article class="portfolio-item web">
  <a data-rel="prettyPhoto" href="http://vimeo.com/34266952">
    <img src="http://localhost/wordpress/wp-content/themes/dewuske/images/portfolio/introspection.jpg" alt="">
    <span class="genericBeaconIsotope">
      <span class="beaconContainer">
        <span class="beaconBar"></span>
        <span class="beaconCircle1"></span>
        <span class="beaconCircle2"></span>
        <span class="beaconText">Introspection</span>
      </span>
    </span>
  </a>
</article>

Я пытаюсь навести на beaconContainer и повлиять на изображение. Он должен функционировать как опрокидывание. Вот что я пытаюсь выполнить в CSS:

    -webkit-transform: scale(10);    
    -moz-transform: scale(10);    
    -o-transform: scale(10);    
    -ms-transform: scale(10); 
    transform: scale(10);    
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity:0;
    transition: all 1s ease-out 0s;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease-out;
    transition-delay: 0s;
}

Как мне это сделать? Я знаю очень мало JavaScript или jQuery или как вызывать события у них, особенно так. благодаря

Stronghammer 28 апр. 2014, в 23:23

Источник

Теги:

javascript

jquery

css3

function

onmouseover

4 ответа

Ещё вопросы

Sean Quinn · Answer 1 · 2014-04-28T19-35-00.000Z

JQuery предоставляет несколько методов, которые могут вам помочь.

Вы можете вручную настроить CSS с помощью метода .css() или динамически применить классы CSS к элементам (это будет мой предпочтительный способ) с использованием методов.addClass() и .removeClass(), реагирующих на события пользователя таких как мышиные надстройки и т.д.

NB: Это конкретное решение jQuery для проблемы, представленной вашим вопросом.

относится только к библиотеке jQuery. Вы должны упомянуть это.
Очень хороший момент, я добавлю это предостережение.

Maciej Chałapuk · Answer 2 · 2014-04-28T20-03-00.000Z

Вам необходимо создать класс CSS со стилями, которые вы хотите применить:

.rollover {
    /* your styles here */
}

и немного jQuery, который включал ваши стили, когда мышь над маяком Контейнер:

$('article.portfolio-item.web').each(function(index, articleElem) {
   var article = $(articleElem);
   var image = article.find('img');
   var container = article.find('.beaconContainer');
   container.mouseover(function() { image.addClass("rollover"); });
   container.mouseout(function() { image.removeClass("rollover"); });
});

Он также будет работать, если на странице есть несколько статей.

Я новичок в этом сайте, поэтому не могу оценить этот ответ, но, пожалуйста, дайте Maciej положительный отзыв для меня. Этот ответ сработал так, как мне было нужно. Я не совсем уверен, откуда он знает, что это «этот» элемент, на который он должен воздействовать, но он работает как шарм.
Я думаю, что вы можете наградить меня 25 повторениями, приняв мой ответ ( meta.stackexchange.com/questions/5234/… ). Приветствия.

Steven Britton · Answer 3 · 2014-04-28T19-51-00.000Z

Вы можете создать класс CSS, а затем добавить его в контейнер, когда вы наводите курсор, а затем удаляете класс, как только вы выходите:

$('.beaconContainer img').hover(function(){
    $( this ).addClass(cssClassName);
  }, function() {
   $( this ).removeClass(cssClassName);
  }
);

Он хочет влиять на изображение, а не на beaconContainer . В противном случае вы действительно не должны использовать jQuery для этого.
Спасибо, но он прав. Я бы использовал CSS для управления им, за исключением того, что он не находится в прямой иерархии. Это на несколько уровней, а потом это дочерний элемент родного брата.

Brian Anderson · Answer 4 · 2014-04-28T19-43-00.000Z

В jQuery вы можете использовать функции addClass и removeClass. Сохраните все css в файле css, а затем просто измените класс каждого элемента.

http://api.jquery.com/addclass/