Control CSS via JavaScript or jQuery [duplicate]

Question

I am looking for a way to control the CSS for a specific item on hover. Since it's not an element directly in the parent lineage, I can't use CSS.

<article class="portfolio-item web">
  <a data-rel="prettyPhoto" href="http://vimeo.com/34266952">
    <img src="http://localhost/wordpress/wp-content/themes/.../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>

I'm trying to hover on beaconContainer and have the image be affected. It should function like a rollover. Here is what I'm trying to accomplish in 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;
}

How would I go about doing this? I know very little JavaScript or jQuery or how to call events from them, especially like this. Thanks

Sean Quinn · Accepted Answer · 2014-04-28 21:01:47Z

2

JQuery provides several methods which may be helpful to you.

You could go about manually setting the CSS using the .css() method, or apply CSS classes dynamically to the elements (this is would be my preferred way) using the .addClass() and .removeClass() methods, reacting to user events such as mouse overs, etc.

NB: This is specifically a jQuery solution to the problem presented by your question.

answered Apr 28, 2014 at 21:01

Sean Quinn

2,1911 gold badge20 silver badges48 bronze badges

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

1 Comment

vol7ron Over a year ago

only applies to the jQuery library. You should mention that.

Brian Anderson · Accepted Answer · 2014-04-28 21:01:53Z

0

In jQuery, you can use the addClass and removeClass functions. Keep all of the css in the css file, and then just change the class of each element.

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

answered Apr 28, 2014 at 21:01

Brian Anderson

6217 silver badges22 bronze badges

Comments

Maciej Chałapuk · Accepted Answer · 2014-04-28 21:33:42Z

0

You need to create a CSS class with the styles you want to apply:

.rollover {
    /* your styles here */
}

and a bit of jQuery that enabled your styles when mouse is over the beaconContainer:

$('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"); });
});

It will also work if you have multiple articles on page.

edited Apr 28, 2014 at 21:33

answered Apr 28, 2014 at 21:27

Maciej Chałapuk

4624 silver badges12 bronze badges

1 Comment

Stronghammer Over a year ago

I'm new to this site, so I can't rate this answer, but please give Maciej positive feedback for me. This answer worked just like I needed it to. I'm not entirely sure how it knows that it's a "this" element that it needs to affect, but it works like a charm.

Steven Britton · Accepted Answer · 2014-04-28 21:37:14Z

-1

You can create the CSS class and then add it to the container when you hover and then remove the class once you mouse out:

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

edited Apr 28, 2014 at 21:37

answered Apr 28, 2014 at 21:03

Steven Britton

1972 silver badges5 bronze badges

2 Comments

Bergi Over a year ago

He wants to affect the image, not the beaconContainer. Otherwise you really shouldn't use jQuery for this.

Stronghammer Over a year ago

Thanks, but he's right. I would use CSS to control it, except that it's not in the direct hierarchy. It's up a few levels and then it's a child of a sibling element.

Collectives™ on Stack Overflow

Control CSS via JavaScript or jQuery [duplicate]

4 Answers 4

1 Comment

Comments

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

2 Comments

Linked

Related