0

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

Improve this question
0

4 Answers 4

Reset to default
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.

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

1 Comment

only applies to the jQuery library. You should mention that.
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/

Improve this answer

Comments

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.

Improve this answer

1 Comment

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.
-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);
  }
);
Improve this answer

2 Comments

He wants to affect the image, not the beaconContainer. Otherwise you really shouldn't use jQuery for this.
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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.