Question

I have a <div> full of <ul> elements. When i hover over one of these elements i want to make adjustments to the html markup.

my standard <ul> items look like this:

<ul>
    <li class="category"><img src="source" /></li>
    <li class="time days"><p>text</p></li>
    <li class="participant participant_one"><p><img src="source" />text</p></li>
    <li class="divider"><p>:</p></li>
    <li class="participant participant_two"><p><img src="source" />text</p></li>
    <li class="event_type"><p>Event</p></li>
    <li class="event_name"><p>text</p></li>
    <li class="hot"><p>945°</p></li>
    <li class="rating"><p>4.99</p></li>
    <li class="comments"><p>7.544</p></li>
    <li class="marked"></li>
</ul>

now on hover i want this element to look like this:

<ul class="expanded">
    <li class="category"><img src="img/headlines_category_icon_1.png"></li>
    <li class="time days"><p>29.05</p></li>
    <li class="icon participant_one_icon"><img src="img/user_icon_36-36_1.png"></li>
    <li class="icon participant_two_icon"><img src="img/user_icon_36-36_1.png"></li>
    <li class="headline">
        <ul>
            <li class="participant participant_one"><p>Text</p></li>
            <li><p>:</p></li>
            <li class="participant participant_two"><p>Text</p></li>
        </ul>
        <p><span>Event</span> Eventname</p>
    </li>
    <li class="actions">
        <ul class="actions_ul">
            <li class="bookmark"><a href="#">Bookmark</a></li>
            <li class="comment"><a href="#">Comment</a></li>
            <li class="share"><a href="#">Share</a></li>
        </ul>
    </li>
</ul>

i want to accomplish this using jquery and i tried following:

$('div.match_entries ul').mouseenter(function() {
    $(this).addClass('expanded');
    category = $(this).children('li.category');
    time = $(this).children('li.time');
    participant_one_original = $(this).children('li.participant_one');
    participant_one_icon = $(this).children('li.participant_one img');
    participant_one = $(this).children('li.participant_one').remove('img');
    participant_two_original = $(this).children('li.participant_two');
    participant_two_icon = $(this).children('li.participant_two img');
    participant_two = $(this).children('li.participant_two').remove('img');
    divider = $(this).children('li.divider');
    event_type_original = $(this).children('li.event_type');
    event_type = $(this).children('li.event_type p').text();
    event_name_original = $(this).children('li.event_name');
    event_name = $(this).children('li.event_name p').text();
    hot = $(this).children('li.hot');
    rating = $(this).children('li.rating');
    comment = $(this).children('li.comment');
    marked = $(this).children('li.marked');

    $(this).empty();

    $(this).append($(category));
    $(this).append($(time));
    $(this).append('<li class="icon participant_one_icon'+$(participant_one_icon)+'</li>');
    $(this).append('<li class="icon participant_two_icon'+$(participant_two_icon).text()+'</li>');
    $(this).append('<li class="headline"><ul>'+$(participant_one)+'<li><p>:</p></li>'+$(participant_two)+'</ul><p><span>'+$(event_type)+'</span> '+$(event_name)+'</p></li>');

}).mouseleave(function(){
    $(this).removeClass('expanded');
    $(this).empty();
    // APPEND ORIGINAL STUFF
})

Doesn’t work quite… $(category) and $(time) are appended in the right way but the others are included as object Object

Any hints?

Answer 1

If you have such information to be changed on hover, maybe you should think of having directly the expanded version has an hidden one, so on hover you only have to hide the original one and then display the hidden one.

<ul class="original">
   <li> ... <li>
   <li> ... <li>
</ul>

<ul class="hidden">
   <li> ... <li>
   <li> ... <li>
</ul>

JS part

$('body').on('mouseenter','ul.original',function() {
   $(this).addClass('hidden')
          .next().removeClass('hidden');
}).on('mouseleave', 'ul.original', function(){
   $(this).removeClass('hidden')
          .next().addClass('hidden');
});

CSS

.hidden { display: none; }