Question

The past 3 days I’ve tried to get this simple example to work but whatever I try I just can’t seem to understand where I’m going wrong…

HTML:

<input type="text" id="textEntry" /> <button>Go</button>
<ul id="list">
    <li>Text from the input field will appear below</li>
</ul>

jQUERY:

$('button').click(function() {
    $enteredText = $('#textEntry').val();

    if($enteredText.length === 0) {
        alert('PLace an item in the field box');
    } else {        
        $newListItem = $('<li/>').html($enteredText).appendTo('#list');
    }

});

$('li').live('mouseover mouseout', function(event) {
    if(event.type == mouseover) {
        $(this).css('background-color', 'yellow');
    } else {
        $(this).css('backgorund-color', 'transparent'); }
});

Ultimately what I’m looking to do is have a user input an item into the text field which would then append itself to the existing list (this works – no issues). The user can then hover over a specific entry causing the background to turn yellow on mouseover and transparent on mouseout (the issue).

Any help would be swell.

Thanks.

Answer 1

The event.type gives you name of event in string so mouseover should be "mouseover".

$('li').live('mouseover mouseout', function(event) {
    if(event.type == "mouseover") {
        $(this).css('background-color', 'yellow');
    } else {
        $(this).css('backgorund-color', 'transparent'); }
});

Edit backgorund-color should be background-color