Problem with mouseover and mouseout in javascript in template

  • matzoballed

    (@matzoballed)


    13 years, 11 months ago

    Hi there

    I am customizing a template in wordpress. There is a bit of javascript in the functions file which changes a box colour on mouseover/mouseout. I changed the colours to ones more suited to my needs, however it keeps referring to the default set.

    I am not sure what I am doing wrong – this is the javascript

    echo ‘<script type=”text/javascript” src=”js/jquery-1.7.2.min.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function(){
    $(“div#fbox_35”).mouseover(function(){
    $(this).css(“background-color”,”#274068;”);
    });
    $(“div#col1.box”).mouseout(function(){
    $(this).css(“background-color”,”#274068″);
    });
    });
    </script>
    <script type=”text/javascript”>
    $(document).ready(function(){
    $(“div#fbox_34”).mouseover(function(){
    $(this).css(“background-color”,”#91a833″);
    });
    $(“div#fbox_34”).mouseout(function(){
    $(this).css(“background-color”,”#91a833″);
    });
    });
    </script>
    <script type=”text/javascript”>
    $(document).ready(function(){
    $(“div#fbox_33”).mouseover(function(){
    $(this).css(“background-color”,”#27b1ce”);
    });
    $(“div#fbox_33”).mouseout(function(){
    $(this).css(“background-color”,”#23c2e3″);
    });
    });
    </script>’ . “/n”;
    }

    I am a noob at JS so would appreciate any help or advice I can get. The colours in the script are the ones I want, but it seems to be referring to the default. Could it be calling some cached version from somewhere?

Viewing 1 replies (of 1 total)
  • s_ha_dum

    (@apljdi)

    13 years, 11 months ago

    First, paste your code to the pastebin. As soon as a moderator notices that code will be deleted. You can post no more than ten lines inline.

    Second, I don’t know what you mean by “referring to the default”. I don’t really know what you are seeing. I don’t know what is wrong. You can try clearing your cache though.

    Third, two of your mouseover/mouseout combos are setting the background to the same thing on both mouseover and mouseout.

    Fourth, why aren’t you doing this in CSS? This CSS rule is, as I understand what you are doing, entirely equivalent to your lengthy mouseover/mouseout functions:

    #fbox_33:hover {
    background-color:#27b1ce;
}

    You’d need one for each div ID, of course.

Viewing 1 replies (of 1 total)

The topic ‘Problem with mouseover and mouseout in javascript in template’ is closed to new replies.