CODEWITHSUNDEEP
jquery
Jake
Jake

Reputation: 1370

In jQuery add a list when hovered?

I'd like to apply a variable to a listed item when it's hovered on. The listed item is in HTML like this:

<ul class="listed-items">
 <li class="navigation"><a href="/">Root Path</a></li>
 <li class="navigation"><a href="/something">Something Else</a></li>
 <li class="navigation dropdown-service"><a href="/websites">Website</a></li>

Basically I want to hit the last list item and make it hoverable and then display it's own listed websites.

So I have the following:

var service_list = [{name: "Google", url: "www.google.com"}, {name: "Bing", url:"www.bing.com"}];

Then I have for the hover:

$(document).ready(function()
{          
$("li").hover(function(){
    $(this).find(".dropdown-service").show()},
    function () {
    $(this).find(".dropdown-service").hide()
});
});

I honestly don't think that's the best way for the hover to work unless I should be putting something in the show for the variable.

I've tried the following to no avail, albeit no errors:

$(document).ready(function(){
$('li').hover(function(){
  $(this).find('.dropdown-service').show(service_list.name)},
  function(){
    $(this).find(".dropdown-service").hide();
  }
});
});

Upvotes: 0

Views: 28

Answers (1)

designerbase
designerbase

Reputation: 61

Hi i guess this is what you really looking for

try this. and this is jquery 3.3.1 https://jsfiddle.net/eaje2ywt/19/

$('.dropdown-service').on('mouseover',function(ev){
  ev.stopPropagation();
  for(var i=0;i<service_list.length;i++) {
 var s = $("<li>"+service_list[i].name+"</li>");
 $('.websites').append(s);
}

Upvotes: 1

Related Questions