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>

我在google 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');
    }
);

<强> Demo

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代码。您可以使用direct children中的CSS选择器。每次添加新的锚元素时，这将为您节省附加类的负担。

注意：我刚刚编辑了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定位具有div“图标包装器”id的所有直接子女。

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

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

3 个答案: