Question

我似乎无法看到以下代码的问题，也许我会失明。

我们更改颜色的javascript行有效，但下一行不是我做错了什么？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<div class="Generic">
    <div class="box">

        <div class="Corner">
        </div>


        <div class="headerText">
            <h1>text1</h1>
            <p>text3</p>
        </div>


        <div class="Content">
            <a href="https://www.mylink.com" title="Sign Up Now">Proceed</a>
        </div>

    </div>

    <p style="float:left; font-weight:bold; padding: 10px; padding-top:35px;">OR</p>

</div>

<script type="text/javascript">

    $("div.box").mouseover(function () {
        $("div.Generic div.Content a").css("color", "yellow");
        $("div.Generic div.Content .box").css("border", "1px solid black");
    });

</script>

Answer 1

或只是使用：

 $("div.box").mouseover(function () {
        $("div.Generic div.Content a").css("color", "yellow");
        $(this).css("border", "1px solid black");
    });

因为你已经选择了它

Answer 2

看起来您的选择器是向后的。尝试这样的事情：

$("div.Generic div.box div.Content").css("border", "1px solid black");

虽然有更好的方法可以做到这一点。试试这个：

$(function() {
    $(".box").mouseover(function() {
        $(this).find(".content").css("border", "1px solid black");
        $(this).find(".content a").css("color", "yellow");        
    });
});

Answer 3

.box不在div.Content中，

所以它应该是：

$("div.Generic .box").css("border", "1px solid black");

不是吗？

Answer 4

您可以使用hover，您的选择器会返回undefined：

http://jsfiddle.net/Fny4X/

JQuery选择器或鼠标悬停问题

4 个答案: