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

我使用 2.1.3 版的 jquery 和 google CDN。

而且我只是想在图标视图悬停时发出警报。一个脚本：

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

警报只是在第一个项目只悬停在另一个项目时才出现..

我想要的是在其中一个悬停时显示所有图标？？？我只想将不透明度更改为 1。我可以在 css 中使用 :hover 但它只使用它的标签。

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，因为您可能需要它用于其他功能。

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 2

看起来您有多个具有相同 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');
    }
);

Demo

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>