当前位置：文江博客话题详情

jQuery mouseenter +鼠标离开+单击以更改 3
的单独类/样式

发布于 2024-12-04 19:07:13 字数 2596 浏览 1 评论 0原文

我有一组 3 个

，我需要更改 mouseenter、mouseleave 和 click< 上每个的类/强>。

到目前为止，一切正常，除了当我单击时，第三个

不会停留在 mouseenter 状态。它消失了。

单击此处查看到目前为止它的工作原理

代码：

$(function(){
    $(".hidden").hide();
$(function(){
    $("#list ul li").mouseenter(function(){
        $(this).parent().children().first().addClass('name');
        $(this).parent().children().next().addClass('title');
        $(this).parent().children().last().show().addClass('award');
    }).mouseleave(function(){
        $(this).parent().children().first().removeClass('name');
        $(this).parent().children().next().removeClass('title');
        $(".hidden").hide();               
    }).click(function(e){
        $('.perm-name').removeClass('perm-name');
        $('.perm-title').removeClass('perm-title');
        $('.perm-award').removeClass('perm-award');
        $(this).parent().children().first().addClass('perm-name');
        $(this).parent().children().next().addClass('perm-title');
        $(this).parent().children().last().show().addClass('perm-award');

    }); 
    $("#list ul li").first().trigger('mouseenter');

});

CSS：

.name,.perm-name { color:#454444; }
.title,.perm-title { color:#930303; }
.award,.perm-award { color:#454444; font-size:11px;}

HTML：

<div id="list">

          <ul>
            <li>THE KILLERS.</li>
            <li>WHEN WE WERE YOUNG</li>
            <li class="hidden">(2006 Grammy Nominated, Best Long Form Video of the Year)</li>
      </ul>                
        <ul>       
            <li>COMMON.</li>
            <li>TESTIFY</li>
            <li class="hidden">(2005 Music Award Nominated, Director of the Year)</li></
        </ul>         
      <ul>
            <li>DURAN DURAN.</li>
            <li>FALLING DOWN extended version</li>
            <li class="hidden">(2008 Music Award Nominated, Video of the Year)></li>
        </ul>            
        <ul>
            <li>ARTFUL DODGER.</li>
            <li>short film</li>
            <li class="hidden">(2004 Music Award Nominated, Director of the Year)></li>
        </ul>

 </div>

原文

I have a set of 3 <li> that I need to change the class of each on mouseenter, mouseleave and click.

So far everything is working except when I click, the 3rd <li> doesn't stay in the mouseenter state. It disappears.

click here to see how it works so far

CODE:

$(function(){
    $(".hidden").hide();
$(function(){
    $("#list ul li").mouseenter(function(){
        $(this).parent().children().first().addClass('name');
        $(this).parent().children().next().addClass('title');
        $(this).parent().children().last().show().addClass('award');
    }).mouseleave(function(){
        $(this).parent().children().first().removeClass('name');
        $(this).parent().children().next().removeClass('title');
        $(".hidden").hide();               
    }).click(function(e){
        $('.perm-name').removeClass('perm-name');
        $('.perm-title').removeClass('perm-title');
        $('.perm-award').removeClass('perm-award');
        $(this).parent().children().first().addClass('perm-name');
        $(this).parent().children().next().addClass('perm-title');
        $(this).parent().children().last().show().addClass('perm-award');

    }); 
    $("#list ul li").first().trigger('mouseenter');

});

CSS:

.name,.perm-name { color:#454444; }
.title,.perm-title { color:#930303; }
.award,.perm-award { color:#454444; font-size:11px;}

HTML:

<div id="list">

          <ul>
            <li>THE KILLERS.</li>
            <li>WHEN WE WERE YOUNG</li>
            <li class="hidden">(2006 Grammy Nominated, Best Long Form Video of the Year)</li>
      </ul>                
        <ul>       
            <li>COMMON.</li>
            <li>TESTIFY</li>
            <li class="hidden">(2005 Music Award Nominated, Director of the Year)</li></
        </ul>         
      <ul>
            <li>DURAN DURAN.</li>
            <li>FALLING DOWN extended version</li>
            <li class="hidden">(2008 Music Award Nominated, Video of the Year)></li>
        </ul>            
        <ul>
            <li>ARTFUL DODGER.</li>
            <li>short film</li>
            <li class="hidden">(2004 Music Award Nominated, Director of the Year)></li>
        </ul>

 </div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

猥琐帝 2024-12-11 19:07:13

这是一个完整的 HTML 页面，其中包含您正在寻找的功能：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        ul li a {
            text-decoration: none;
            color: #999;
        }

        ul li a:hover,
        ul li a.selected {
            color: #454444;
        }

        ul li a:hover > span,
        ul li a.selected > span {
            color: #930303;
        }

        ul li a > span.hidden {
            display: none;
            font-size: 11px;
            color: #999;
        }

        ul li a:hover > span.hidden,
        ul li a.selected > span.hidden {
            display: inline;
        }
        </style>


        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script type="text/javascript">
        $(function() {
            $("ul li a").click(function() {
                $("ul li a").removeClass("selected");
                $(this).addClass("selected");
            });
        });
        </script>
    </head>
    <body>
        <ul>
            <li>
                <a href="#">
                    THE KILLERS.
                    <span>When We Were Young</span>
                    <span class="hidden">(2006 Grammy Nominated, Best Long Form Video of the Year)</span>
                </a>
            </li>
            <li>
                <a href="#">
                    COMMON.
                    <span>Testify</span>
                    <span class="hidden">(2005 Music Award Nominated, Director of the Year)</span>
                </a>
            </li>
            <li>
                <a href="#">
                    DURAN DURAN.
                    <span>FALLING DOWN extended version</span>
                    <span class="hidden">(2008 Music Award Nominated, Video of the Year)</span>
                </a>
            </li>
            <li>
                <a href="#">
                    ARTFUL DODGER.
                    <span>short film</span>
                    <span class="hidden">(2004 Music Award Nominated, Director of the Year)</span>
                </a>
            </li>
        </ul>
    </body>
</html>

您不需要太多 jQuery - 您应该在继续工作之前看一些有关 HTML 和 CSS 的书籍，这会为您省去很多麻烦。

Here's a full HTML page with the functionality you're looking for:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        ul li a {
            text-decoration: none;
            color: #999;
        }

        ul li a:hover,
        ul li a.selected {
            color: #454444;
        }

        ul li a:hover > span,
        ul li a.selected > span {
            color: #930303;
        }

        ul li a > span.hidden {
            display: none;
            font-size: 11px;
            color: #999;
        }

        ul li a:hover > span.hidden,
        ul li a.selected > span.hidden {
            display: inline;
        }
        </style>


        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script type="text/javascript">
        $(function() {
            $("ul li a").click(function() {
                $("ul li a").removeClass("selected");
                $(this).addClass("selected");
            });
        });
        </script>
    </head>
    <body>
        <ul>
            <li>
                <a href="#">
                    THE KILLERS.
                    <span>When We Were Young</span>
                    <span class="hidden">(2006 Grammy Nominated, Best Long Form Video of the Year)</span>
                </a>
            </li>
            <li>
                <a href="#">
                    COMMON.
                    <span>Testify</span>
                    <span class="hidden">(2005 Music Award Nominated, Director of the Year)</span>
                </a>
            </li>
            <li>
                <a href="#">
                    DURAN DURAN.
                    <span>FALLING DOWN extended version</span>
                    <span class="hidden">(2008 Music Award Nominated, Video of the Year)</span>
                </a>
            </li>
            <li>
                <a href="#">
                    ARTFUL DODGER.
                    <span>short film</span>
                    <span class="hidden">(2004 Music Award Nominated, Director of the Year)</span>
                </a>
            </li>
        </ul>
    </body>
</html>

You're not looking for much jQuery - you should take a look at some books on HTML and CSS before continuing your work, it'll save you a lot of headaches.

回复收藏 0 原文

彩虹直至黑白 2024-12-11 19:07:13

为什么要将一个 document.ready 放在另一个 document.ready 中

$(function(){
    $(".hidden").hide();
$(function(){

    });
});

如果您想在 page 中添加两个 document.ready 函数，

。你应该这样做

$(function(){
   //your code
});

$(function(){
   //your code
});

，为什么你在这里使用两个 document.ready 函数............ ???

why do you have one document.ready inside another one

$(function(){
    $(".hidden").hide();
$(function(){

    });
});

if you want to add two document.ready functions in page .

you should do it like this

$(function(){
   //your code
});

$(function(){
   //your code
});

and also why are you using two document.ready functions here............. ???

回复收藏 0 原文

~没有更多了~

关于作者

心头的小情儿

暂无简介

0 文章

0 评论

23 人气

关注发私信

醉城メ夜风

文章 0 评论 0

关注

远昼

文章 0 评论 0

关注

平生欢

文章 0 评论 0

关注

微凉

文章 0 评论 0

关注

Honwey

文章 0 评论 0

关注

qq_ikhFfg

文章 0 评论 0

友情链接

文江博客

jQuery mouseenter +鼠标离开+单击以更改 3
的单独类/样式

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

醉城メ夜风

远昼

平生欢

微凉

Honwey

qq_ikhFfg

友情链接

jQuery mouseenter +鼠标离开+单击以更改 3的单独类/样式

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

醉城メ夜风

远昼

平生欢

微凉

Honwey

qq_ikhFfg

友情链接

jQuery mouseenter +鼠标离开+单击以更改 3
的单独类/样式

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。