【问题标题】:Selector Jquery选择器 Jquery
【发布时间】:2013-04-12 00:07:03
【问题描述】:

你好,我正在学习 jquery 和 JavaScript,我有一堆 div 和它们里面的 span,所有这些 div 都有相同的类,而且它们所有的 span 都有相同的类当我将鼠标悬停时我想要的是一个 div,用该 div 内的标签 span 更改字母的颜色。生病让你如何构建我的 cod 和我的 jquery 函数。我想知道如何使用选择器来实现这一点。

这是 jsFiddle:

$(".wrap-faq").on("mouseover", hoverFaq);

    function hoverFaq(){
        $(".wrap-faq .faq .txt-preg-faq").css("color", "white")
        $(this).addClass("over");
    }

$(".wrap-faq").on("mouseleave", unHoverFaq);

    function unHoverFaq(){
        $(this).removeClass("over");
    }

http://jsfiddle.net/xtatanx/jz73b/

【问题讨论】:

  • 您的代码似乎按照您的意愿行事,问题出在哪里?
  • 这个问题对我来说听起来有点可疑......
  • 问题是我不希望它们都是白色的,只是我鼠标悬停的那个,我不希望所有跨度都变成白色:/
  • 对于这样的事情,似乎只使用 css 会更有效。如果您必须使用 jQuery 来做,似乎也可以使用更好的 dom 结构
  • 是的,但我在 omeone else strucutre 工作:/ 这就是为什么它如此无组织

标签: jquery html css jquery-selectors


【解决方案1】:

我认为你想要一个简单的 CSS 悬停:

.faq {
    color: black;
}
.faq:hover {
    background: orange;
    color: white;
}

这个http://jsfiddle.net/saYFz/是你想要的吗?

【讨论】:

  • @Jhonnatan Gonzalez Rod 我同意,即使您只是在学习 jquery,但在不使用 jquery 时,这也是一个值得学习的宝贵课程;)
【解决方案2】:

当您将鼠标悬停在 div 上时,此代码将添加一个 CSS 类:

$(".wrap-faq").on("hover",
    function(){
        // on over, add class "over"
        $(this).addClass("over");
    },
    function(){
        // on out, remove class
        $(this).removeClass("over");
    }
);

使用 CSS 进行跨度操作。喜欢:

.over span {color:red;}

编辑:如果您只想在跨度处处理悬停,您可以简单地将选择器修改为:

$(".wrap-faq span")

【讨论】:

    【解决方案3】:

    我猜这正是你想要的:

    http://jsfiddle.net/jz73b/1/

    $(".contents-faq").on("mouseover", '.wrap-faq', function() {
        $(".wrap-faq .faq .txt-preg-faq").css("color", "white")
        $(this).addClass("over");
    }).on("mouseleave", '.wrap-faq', function() {
        $(this).removeClass("over");
    });
    

    【讨论】:

      【解决方案4】:

      只需在您的 hoverFaq 函数中添加这一行:

      $(this).find('span').css('color', 'white');
      

      在这里你可以工作:http://jsfiddle.net/jz73b/2/

      【讨论】:

        猜你喜欢
        • 2010-11-16
        • 1970-01-01
        • 2011-09-19
        • 2011-03-09
        • 1970-01-01
        相关资源
        最近更新 更多