CODEWITHSUNDEEP
javascriptcss
user3219182
user3219182

Reputation: 69

Changing image opacity on hover of other elements in div

I'm trying to create an effect used here so that when I hover over an image, the image opacity of the other images in the div changes but not the one hovered on. http://www.mintel.com/meet-the-team/page/2

$('myElement').set('opacity', 0.5).addEvents({
    mouseenter: function(){

I was going to use this function but this would change the whole divs opacity on hover Any suggestions on how I can start without using jquery?

Upvotes: 1

Views: 2553

Answers (3)

Irvin Dominin
Irvin Dominin

Reputation: 30993

With pure CSS I don't think it's possible (because you need a selector not already implemented in CSS), you can use this pure js solution (no jQuery).

Code:

var rows = document.getElementsByClassName('demo');
for (var i = 0; i < rows.length; i++) {
    rows[i].onmouseenter = function (event) {
        for (var j = 0; j < rows.length; j++) {
            if (rows[j]===this) continue
            rows[j].className += " other";
        }
    };

    rows[i].onmouseleave = function (event) {
        var hovers = document.getElementsByClassName('other');
        var len = hovers.length;
        for (var j = 0; j < len; j++) {
            hovers[0].className = hovers[0].className.replace(/\sother(\s|$)/, '');
        }
    };
}

Demo: http://jsfiddle.net/IrvinDominin/7K2Z3/

Upvotes: 2

nmoliveira
nmoliveira

Reputation: 1769

Give all your images a common class. Then you can use this selector:

$(".commonClass:not(:hover)")

This will select all images that are not hover.

With your mouseenter event you select all images that are not hover and apply the opacity change:

$(".commonClass:not(:hover)").css('opacity', '0.5');

Add the mouseleave event to restore the opacity:

 $(".commonClass:not(:hover)").css('opacity', '1');

So, you will end with something like this:

$('.commonClass').on('mouseenter', function () {
    $(".commonClass:not(:hover)").css('opacity', '0.5');
});

$('.commonClass').on('mouseleave', function () {
    $(".commonClass:not(:hover)").css('opacity', '1');
});

Upvotes: 0

Mihey Egoroff
Mihey Egoroff

Reputation: 1542

Let's say each block (image+text) will have .item class.

var item = $('.item');
item.on('hover', function() {
  item.css('opacity', '0.5');
  $(this).css('opacity', '1');
});

Hope you get the idea.

Upvotes: 0

Related Questions