Question

I can’t seem to see the problem with the following code, maybe I am going blind.

The line of javascript where we change the color works but the next line does not what am I doing wrong?

<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

Looks like your selector is backwards. Try something like this instead:

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

There’s a better way to do this though. Try this instead:

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