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

我使用了 jquery 的 2.1.3 版本和 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 的元素。 ID 必须是唯一的。您可以使用相同的 class 代替。

标记：

               <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

您需要将 class 附加到您需要悬停的所有元素。您仍然可以保留您的 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

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

注意：我刚刚编辑了 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/Whosebug.jpg" />
            </a>
            <a href="#" id="edit">
                <img src="http://www.skrenta.com/images/Whosebug.jpg" />
                </a>
        </div>
     <h3>'.$data->brand_name.'</h3>

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

</div>

你可以做的是使用 jQuery 定位 div 具有 id "icon-wrapper".

的所有直接子代

$(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/Whosebug.jpg" />
            </a>
            <a href="#" id="edit">
                <img src="http://www.skrenta.com/images/Whosebug.jpg" />
                </a>
        </div>
     <h3>'.$data->brand_name.'</h3>

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

</div>

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

Change opacity css with jquery selector

css

jquery

opacity