使用jquery选择器更改不透明度css

Question

我正在构建一个具有图标视图和相互编辑的品牌缩略图。当其中一个悬停时，我想悬停所有图标。

这里有我的结构..

<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>

我在谷歌CDN上使用了jquery的2.1.3版本。

而且我只是在图标视图徘徊时尝试提醒。 一个脚本：

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

警报刚出现时，第一个项目只是与另一个项目一起徘徊。

我想要的是当其中一个徘徊时显示所有图标??? 我只想将不透明度更改为1.我可以使用：将鼠标悬停在css中，但它只使用它的标记。

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;
}

Answer 1

看起来你有多个具有相同ID的元素。 ID必须是唯一的。 你可以改用同一个班级。

标记：

               <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>

脚本：

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

演示

Answer 2

您需要将类附加到所需的所有元素上。 您仍然可以保留您的ID，因为您可能需要其他功能。

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
});

Answer 3

您不需要将类附加到anchor标记或img标记。 您可以在CSS使用direct children选择器。 每次添加新的锚元素时，这将为您节省附加类的负担。

注意 ：我刚刚编辑了img标签的源代码（并添加了一些CSS ）来显示图像。

鉴于您的HTML格式如下：

<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>

你可以做的是使用jQuery来定位具有id “icon-wrapper”的div所有直接子节点。

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

这将帮助您定位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>