如何在列表项悬停时切换类的可见性

How to toggling the visibility of a class on the hover of a list item?

本文关键字：可见性 悬停 列表      更新时间：2023-09-26

当我将鼠标悬停在".block1"上时，我试图切换".image1"的可见性，但没有成功。我错过了什么？有人能帮我吗？

HTML:

<div class="container">
        <div class="wrapper">
            <section class="images">
                <article id="image" class="image1">
                    <div class="img"></div>
                </article>
                <article id="image" class="image2">
                    <div class="img"></div>
                </article>
                <article id="image" class="image3">
                    <div class="img"></div>
                </article>
            </section>
            <ul class="blocks">
                <li class="block1">Image1
                </li>
                <li class="block2">Image2
                </li>
                <li class="block3">Image3
                </li>
            </ul>
        </div>    
    </div>

脚本：

$(document).ready(function () {
$(".block1").hover(function(){
    $(".image1").fadeTo("slow", 1);
    },function(){
        $(".image1").fadeTo("slow", 0);
});
});

这是我的小提琴

我想您忘记在jsfiddle上选择jQuery框架了。在页面中使用jQuery库之前，请先添加它。

在根上的js文件夹中添加网站中的库文件

<script type="text/javascript" src="/js/jQuery.min.js"></script>

从谷歌API 添加库

<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

实时演示

$(document).ready(function () {
    $(".block1").hover(function(){
        $(".image1").fadeTo("slow", 1);
        },function(){
            $(".image1").fadeTo("slow", 0);
    });
});
相关文章：