Javascript 悬停时仅显示一个div

我正在使用WikipediaAPI做一个项目，用户可以在搜索中键入一些名称，并从Wikipedia获得结果。所以我有大部分的工作，但有一个问题妨碍了我。当我将鼠标悬停在“每个列表”div上时，会从父div的右侧显示“显示更多”div，即“每个列表”div。然后我将鼠标悬停在“显示更多”div上，这会导致另一个名为“titleDesc”的div出现。问题是当我将鼠标悬停在“showmore”div上时，所有显示的“titleDesc”divs都会显示，而我只需要显示一个相关div

Javascript代码

var apiKey = "*****";
var appendApiKeyHeader = function(xhr) {
  xhr.setRequestHeader('Api-Key', apiKey)
};

var name = "Eminem";
var searchRequest = {
  "phrase": name
}

$('#search').click(function() {

  var foundArticle = $("#query").val();

  console.log(foundArticle);

  var wikiUrl = 'http://en.wikipedia.org/w/api.php?action=opensearch&search=' + foundArticle + '&format=json&callback=wikiCalback';

  // Clear content before AJAX call
  $(".list-container").html("");

  $.ajax({
      url: wikiUrl,
      dataType: "jsonp",
      success: function(response) {
          var artList = response[1];
          console.log(artList);
          for (var i = 0; i < artList.length; i++) {
            var title = artList[i];
            console.log("Number" + " " + i + " " + title);
            var titleDesc = response[2][i];
            console.log("Number" + " " + i + " " + titleDesc);
            var url = 'http://en.wikipedia.org/wiki/' + title;

            $(".list-container").append(
              '<span class = "each-list">' +
              '<a href="' + url + '" target="_blank" >' +
              title +
              '</a>' +
              '<div class="show-more">' +

              '<div id="show-more-inner">MORE</div>' +

              '</div>' +

              '</span>' +

              '<div class="titleDesc">' + '<p>' + titleDesc + '</p>' + '</div>'

            );

          } // end of "for" loop

          $('.show-more').hover(

            function() {
              $('.titleDesc').show();
            }

          );
        } // success function end

    }) // ajax function

  return false;

}); // click function

function GetSearchResults() {
  $.ajax({
    type: "GET",
    beforeSend: appendApiKeyHeader,
    url: "https://api.gettyimages.com/v3/search/images",
    data: searchRequest
  }).success(function(data, textStatus, jqXHR) {
    var uri = data.images[0].display_sizes[0].uri;
    $(".images").append('<img src = "' + uri + '" />');
    console.log(data);

  }).fail(function(data, err) {

    console.log(data);

  });
}

GetSearchResults();

如何仅使该div显示

如果你想了解更多的细节，请随时查看。

$（this）//触发“hover”事件的“.show\u more”元素
.parent（“.each list”）//包含的“.each list”（*）
.next（“.titleDesc”）//类为“titleDesc”的下一个同级
.show（）；

---

（*）生成的标记无效。

元素只允许包含其他内联元素，不允许包含块元素（

）

在HTML中没有

.titleDesc

，不管怎样，我看到它是由JS生成的。它是在javascript中动态添加的。所以我需要用div替换它？是的，我会用

-imho替换

  $('.show-more').hover(

    function() {
      $('.titleDesc').show();
    }

  );

$(this)                 // the ".show_more" element which triggered the "hover" event
  .parent(".each-list") // the enclosing ".each-list" <span> (*)
  .next(".titleDesc")   // the next sibling with class "titleDesc"
  .show();