Change opacity css with jquery selector

Question

I am building a thumbnail of brands that have icon view and edit each other.. I want to hover all icon when one of them hovered.

Here the structure that I have ..

<div id="brands-wrapper">
                    <img class="brands" src="http://localhost/infodiskon/images/'.$data->image_brand.'">
                    <div id="icon-wrapper">
                        <a href="#" id="view">
                            <img src="http://localhost/infodiskon/assets/images/view_icon.png">
                        </a>
                        <a href="#" id="edit">
                            <img src="http://localhost/infodiskon/assets/images/edit_icon.png">
                        </a>
                    </div>
                    <h3>'.$data->brand_name.'</h3>
                    <h4>'.$data->location.'</h4>
                </div>

I have used a version 2.1.3 of jquery with google CDN.

And also I just trying to alert when icon view hovered . a script :

$(document).ready(function() {
        $("#view").hover(
            function() {
                alert("Yo");
            }
        );
    });

alert just showed up when the first item only hovered not with the other one..

What I want is to show all icon when one of them hovered??? I just want to change the opacity to 1. I can use :hover in css but it just working with only tag of it.

css

#icon-wrapper{
    position: absolute;
    top: 0;left: 0;
}
#icon-wrapper .view, #icon-wrapper .edit{ 
    display: block;
    width: 194px;
    height: 94px;
    line-height: 94px;
    text-align: center;
    background-color: #363636;
    opacity: 0;
    color: white;
    text-decoration: none;
}
.view>img{margin-bottom: -16px;} 
.edit>img{margin-bottom: -10px;}
#icon-wrapper .view{margin-bottom: 6px;}
#icon-wrapper .view:hover, #icon-wrapper .edit:hover{
    opacity: .8;
}

you need to apply the .hover to a class which all elements share. At the moment, youre just binding it to one id called #view — CodeGodie
– CodeGodie, Commented Feb 18, 2015 at 19:01

CodeGodie · Accepted Answer · 2015-02-18 19:47:45Z

1

You need to attach the class to all the elements you need hovered. You can still keep your id as you may need it for other functions.

HTML:

<div id="icon-wrapper">
    <a href="#" class="thumb" id="view">
        <img src="http://localhost/infodiskon/assets/images/view_icon.png">
    </a>
    <a href="#" class="thumb" id="edit">
        <img src="http://localhost/infodiskon/assets/images/edit_icon.png">
    </a>
</div>

JS:

$(".thumb").hover(function() {
    $(this).parent().children().css("opacity", "0");//when mouseenter
}, function() {
    $(this).parent().children().css("opacity", "1");//when mouseleave
});

edited Feb 18, 2015 at 19:47

answered Feb 18, 2015 at 19:08

CodeGodie

12.2k6 gold badges40 silver badges66 bronze badges

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

7 Comments

Ibnu Habibie Over a year ago

okey got it .. how do i select class edit when class view hovered . i just want to change opacity of it with jquery

Satwik Nadkarny Over a year ago

@CodeGodie Could you explain the downvote on my answer?

Ibnu Habibie Over a year ago

how if class is different ?? like my structure above .. class view and edit. they have a different style in css

CodeGodie Over a year ago

Please provide your CSS in your question, so that we can see what you currently have. The class on your elements should not be different, your IDs should be different, and your CSS should be pointing to those IDs

Ibnu Habibie Over a year ago

css updated.. postimg.org/image/609qaft6f/643d2ea9 . this what i want to achieve . i have brand logo that have 2 icon . view and edit . i've used hover in css , but it just affect to that element it self. so i want to hover all icon when one of icon is hovered .. how do i do that ??

|

Milind Anantwar · Accepted Answer · 2015-02-18 19:11:15Z

1

looks like you have multiple element with same IDs. IDs needs to be unique. you can use same class instead.

markup:

               <div class="icon-wrapper">
                    <a href="#" class="view">
                        <img src="http://localhost/infodiskon/assets/images/view_icon.png">
                    </a>
                    <a href="#" class="edit">
                        <img src="http://localhost/infodiskon/assets/images/edit_icon.png">
                    </a>
                </div>

script:

 $(".view").hover(
    function() {
       $(this).next().addClass('smclass');
    },function(){
       $(this).next().removeClass('smclass');
    }
);

Demo

edited Feb 18, 2015 at 19:11

answered Feb 18, 2015 at 18:59

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

7 Comments

CodeGodie Over a year ago

you need to add the class to all your a elements

Mihir Ujjainwal Over a year ago

No, its working , Fiddle here, a little css and changed the class of 2nd anchor

Ibnu Habibie Over a year ago

okey, i dont know why its not working .. but i just want to know how do i select class edit when class view hovered and change css of it

Milind Anantwar Over a year ago

use $(this).next().addClass('smclass').see the updated demo.

Satwik Nadkarny Over a year ago

@MilindAnantwar Could you point where there are "multiple element with same IDs" in the OP's code?

|

Satwik Nadkarny · Accepted Answer · 2015-02-18 19:14:52Z

1

You don't need to attach a class to the anchor tags or the img tags. You can instead use the direct children selector in CSS. This will save you the burden of attaching a class every time a new anchor element is added.

NOTE : I have just edited the source of the img tags (and added some CSS) to display an image.

Given that your HTML is of the format :

<div id="brands-wrapper">
    <img class="brands" src="http://localhost/infodiskon/images/'.$data->image_brand.'" />
        <div id="icon-wrapper">
            <a href="#" id="view">
                <img src="http://www.skrenta.com/images/stackoverflow.jpg" />
            </a>
            <a href="#" id="edit">
                <img src="http://www.skrenta.com/images/stackoverflow.jpg" />
                </a>
        </div>
     <h3>'.$data->brand_name.'</h3>

     <h4>'.$data->location.'</h4>

</div>

What you can do is use the jQuery to target all the direct children of the div having the id "icon-wrapper".

$(document).ready(function () {
    $("#icon-wrapper > a").hover(function () {
        alert("Yo");
    });
});

This will help you to target all anchor tags which are direct children within your div.

$(document).ready(function () {
    $("#icon-wrapper > a").hover(function () {
        alert("Yo");
    });
});

#icon-wrapper > a > img {
    border: 2px solid Black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="brands-wrapper">
    <img class="brands" src="http://localhost/infodiskon/images/'.$data->image_brand.'" />
        <div id="icon-wrapper">
            <a href="#" id="view">
                <img src="http://www.skrenta.com/images/stackoverflow.jpg" />
            </a>
            <a href="#" id="edit">
                <img src="http://www.skrenta.com/images/stackoverflow.jpg" />
                </a>
        </div>
     <h3>'.$data->brand_name.'</h3>

     <h4>'.$data->location.'</h4>

</div>

edited Feb 18, 2015 at 19:14

answered Feb 18, 2015 at 19:09

Satwik Nadkarny

5,1432 gold badges26 silver badges41 bronze badges

2 Comments

CodeGodie Over a year ago

ah i apologize for the downvote.. I thought you were saying something completely different. You answer will work, it is just another way of calling the selectors.

Ibnu Habibie Over a year ago

css updated.. postimg.org/image/609qaft6f/643d2ea9 . this what i want to achieve . i have brand logo that have 2 icon . view and edit . i've used hover in css , but it just affect to that element it self. so i want to hover all icon when one of icon is hovered .. how do i do that ??

Collectives™ on Stack Overflow

Change opacity css with jquery selector

3 Answers 3

7 Comments

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related