javascript - 在鼠标悬停时更改特定标题的颜色-6ren

javascript - 在鼠标悬停时更改特定标题的颜色

转载作者：太空宇宙更新时间：2023-11-03 23:53:37

我的问题是，当我将鼠标悬停在 fois 标题上时，它的文本没有变为白色，我不知道我哪里错了。或者要包含什么。请帮助我... .....
当 fois 选项卡处于事件状态时，另一个问题是文本的颜色显示为白色

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <!--  <link href="css.css" rel="stylesheet" />-->
        <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="accord.js"></script>
        <style>
            .wrap {
                margin-left: 0px;
                margin-top: 0px;
                width: 100px;
            }

            .accordion1 {
                width: 178px;
                margin: 0px;
                padding: 0px;
                list-style: none;
                border: 1px solid #ddd;
            }

                .accordion1 h2 {
                    font-size: 12px;
                    font-weight: bold;
                    font-family: Arial, Helvetica, sans-serif;
                    margin: 0px;
                    text-decoration: none;
                    padding: .25em .25em .25em 2em;
                    color: #333;
                    background: url('compo_images/gradient_v_gray.gif') repeat-x;
                    background: url("./compo_images/arrow_exp_s.gif") 1em .75em no-repeat;
                    border-bottom: 1px solid #ddd;
                    cursor: pointer;
                }

                    .accordion1 h2:hover {
                        background: url('compo_images/gradient_v_orange.gif') repeat-x;
                        color: white;
                    }

                .accordion1 li div.content {
                    padding: 3px;
                    background: #fcfbfb;
                    border-bottom: 1px solid #ddd;
                    /*border: 1px solid #ddd;*/
                }

                .accordion1 li:hover h2 {
                    color: white;
                    background-image: url("./compo_images/arrow_exp_n.gif");
                    background: url('compo_images/gradient_v_orange.gif') repeat-x;
                }

            .accord > li {
                padding: 0;
                list-style-type: none;
            }

                .accord > li > a {
                    text-decoration: none;
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 12px;
                    padding-left: 12px;
                    color: #5f5c5c;
                    background: url("./compo_images/arrow_pointer_se.gif") 0.002em no-repeat;
                }

                .accord > li > ul > li > a {
                    text-decoration: none;
                    color: #5f5c5c;
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 11px;
                    background: url("./compo_images/arrow_dirmini_orange_e.gif") 0.35em no-repeat;
                    padding-left: 17px;
                }

                .accord > li > ul {
                    list-style-type: none;
                    text-align: left;
                    margin: 0;
                    padding: 1px;
                }

            .accord {
                text-decoration: none;
                padding-left: 5px;
            }

                .accord > li > a:hover {
                    color: #f8b106;
                }

                .accord > li > ul > li > a:hover {
                    color: #f8b106;
                }

            .accordion1 > li > h2.active {
                color: white;
                background: url('compo_images/gradient_v_orange.gif') repeat-x;
            }

        </style>
    </head>

    <body>
        <div class="wrap">

            <ul class="accordion1">
                <li>
                    <h2 id="first">CMT</h2>
                    <div class="content">
                        <ul class="accord">
                            <li>
                                <a href="#">main link1</a>
                                <ul>
                                    <li><a href="#">Link One</a></li>
                                    <li><a href="#">Link Two</a></li>
                                    <li><a href="#">Link Three</a></li>
                                    <li><a href="#">Link Four</a></li>
                                    <li><a href="#">Link Five</a></li>
                                </ul>
                            </li>

                            <li>
                                <a href="#">main link2</a>
                                <ul>
                                    <li><a href="#">Link One</a></li>
                                    <li><a href="#">Link Two</a></li>
                                    <li><a href="#">Link Three</a></li>
                                    <li><a href="#">Link Four</a></li>
                                    <li><a href="#">Link Five</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <h2 id="fois"><a href="#" style="text-decoration:none;color:black;">FOIS</a></h2>

                </li>
                <li>
                    <h2>ASP</h2>
                    <div class="content">
                        <ul>

                        </ul>

                    </div>
                </li>
                <li>
                    <h2>PTT</h2>
                    <div class="content">
                        content PTT
                    </div>
                </li>
            </ul>
        </div>
        <!-- wrap -->
    </body>
    </html>

协议(protocol)文件

jQuery(function ($) {
    $('.accord li').hover(function () {
        $(this).find('ul').stop(true, true).slideDown()
    }, function () {
        $(this).find('ul').stop(true, true).slideUp()
    }).find('ul').hide()

    var $lis = $('.accordion1 > li'), $contents = $lis.children('.content').hide();
    var $h2s = $lis.children('h2').click(function () {
        var $this = $(this), $t = $this.next();
        $contents.not($t).stop(true, true).slideUp();
        $this.toggleClass('active', !$t.is(':visible'));
        $t.slideToggle();
        $h2s.not(this).removeClass('active');
    })
})

最佳答案

因为它被包裹在 <a></a> 中标签和其他标签没有包裹在 <a> 中

Demo

<li>
   <h2 id="fois">FOIS</h2> // Your <h2> is wrapped in <a></a> here
</li>

关于javascript - 在鼠标悬停时更改特定标题的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19267250/

文章推荐：从一台计算机移动到另一台计算机时程序崩溃

文章推荐： c-fortran 互操作性 - 带指针的派生类型

文章推荐： javascript - 如何修复页面滚动

jquery - 悬停、鼠标悬停和鼠标移出
我正在学习和使用 jQuery，并且想要显示某些元素的删除图标。我有一个外部主 div，其中包含许多元素的包装器。在元素包装器内部，我想当用户将鼠标悬停在元素包装器上时显示删除图标，并在用户移出元素
javascript - 悬停/单击时显示和隐藏元素
已关闭。此问题需要 debugging details 。目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and the
Qpushbutton 悬停/按下图标
我从 Qt 开始，每当有人将鼠标悬停在 QPushButton 上时，我想将 QPushButton 设置为不同的图标。到目前为止，这是我的代码: #include QPushButton *but
Qpushbutton 悬停/按下图标
我从 Qt 开始，我想在有人将鼠标悬停在 QPushButton 上时将其设置为不同的图标。到目前为止，这是我的代码: #include QPushButton *button = new QPus
带有隐藏内容的 jQuery 悬停
我有以下代码... jQuery(function($) { var timer; $('.action-viewer').hide(); $('.task').on('mouseover
jquery - 使用jquery在照片顶部显示可点击的箭头(悬停)
我有一张照片，当用户将鼠标悬停在它上面时，我会在照片顶部显示(使用绝对定位)2 个箭头，一个用于进入上一张照片，一个用于进入下一张照片。这是到目前为止的代码... $('a.large_product
jquery - 悬停()背景颜色问题
$('li > a').hover( function(){ $(this).animate({ backgroundColor: '#2a639a', color: '#fff'
jQuery 时间鼠标悬停在元素上(悬停)
我有一个悬停事件附加到几个链接，当您点击它时，会出现一个框。有没有一种方法可以让悬停事件仅在鼠标悬停在链接上超过 500 毫秒时触发？因此，目前只要鼠标移到链接上，就会出现该框，但我希望只有当鼠标悬
c# - 如何强制按钮看起来像按下/悬停？
我正在创建包含各种样式控件的演示应用程序。它允许我快速预览更改。我的问题是下面的代码不起作用: Pressed button 它表示 IsPressed 的 setter 受到保护。我明白了，但我需
javascript - JS鼠标悬停，悬停
我正在尝试使用 js 并创建带有一些“信息文本”的“描述框” HTML google JS function info() {} 我不知道是哪个代码用一些文本创建了所谓的“描
Javascript 悬停/点击问题
我有一个 Accordion 风格的菜单，在悬停状态下工作正常，但我想改为点击... $(document).ready(function(){ $('#nav > li').hover(
javascript - 悬停/鼠标悬停在元素内部的每一次移动中都没有激活
我正在使用 Chartjs v.1.0.2 并尝试将点设置为仅在悬停在当前点上时出现。同样的问题是当我使用悬停或鼠标悬停时。可以使用 getPointsAtEvent(e); 找到当前点，但它仅在我将
jquery - 如何单独影响每个元素的样式(悬停)
我使用foreach 语句访问IEnumerable 的所有元素并将其呈现在详细信息页面中。我想让每个元素的悬停属性只影响一个元素。所以我使用 jQuery 单独影响每个元素但是当我运行代码并将鼠标
javascript - 悬停/单击时水平滚动
首先提前感谢您的帮助。案例:我在一行中有多个 div。这些 div 位于一个框中，我可以在此框中水平滚动以查看其他 div。我制作了两个按钮(L 表示左侧，R 表示右侧)，以便在悬停或单击这些按钮时
html - 悬停菜单不会打开，悬停
我正在创建一个应用外观页面。我希望在鼠标悬停时打开底部菜单上的其中一个按钮。这感觉像是一项简单的任务，但我所做的一切似乎都不起作用。我错过了什么，我做了很多研究，但似乎找不到解决方案。我尝试使用
css - 悬停/链接状态仅在链接的某些区域触发
我遇到的问题是，当您将鼠标悬停在按钮上时，只有按钮的某些部分会触发悬停/可点击状态，而不是所有实际 block 。有什么想法吗？这是使用它的站点:http://www.revival.tv/turn
javascript - 悬停/单击时更改内容
我有一位客户想要在他们的网站上实现特定功能，但我有点困惑如何做到这一点。基本上，如果你查看他们的 existing site您可以看到 4 个圆形按钮。他们想要的是，当有人将鼠标悬停(或单击，如果
CSS 悬停，布局变化
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。关闭 9 年前。关于您编写的代码问题的问题必须在问题本身中描述具体问题 — 并且包括有效代码以
jquery - 响应式下拉点击/悬停
我目前正在编写我的第一个响应式网站(总的来说我是一个初学者)并且我遇到了很多障碍。其中之一是我的菜单有问题。我会尽量具体。我有一个用于桌面的水平菜单和一个用于平板电脑/手机的垂直菜单。我不知道如何解决
jQuery 悬停/点击类
我正在为网站创建菜单。我正试图在链接上实现悬停和点击效果。我希望列表元素 a 上的悬停事件触发彩色动画并添加“事件”类。如果触发了点击和悬停事件，我想为该元素分配相同的类。问题是，一旦元素未悬停并

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在鼠标悬停时更改特定标题的颜色