如何加載外部內容並通過js懸停應用css？

我正在加載一個模式的維基百科，一旦它被加載，我想改變任何元素的背景顏色，我將鼠標懸停。下面的代碼確實應用懸停功能，但不起作用。如何加載外部內容並通過js懸停應用css？

點擊按鈕維基百科，然後點擊搜索結果,,一旦頁面加載懸停任何元素和它的背景應該按下面的代碼更改 - JSFiddle playground

$("#wiki").one('click', function(e) { 
     var articleName = $(this).data('subject'); 
     $.getJSON("https://it.wikipedia.org/w/api.php?callback=?", { 
      srsearch: articleName, 
      action: "query", 
      list: "search", 
      format: "json" 
     }, function(data) { 
      $("#results ul").empty(); 
      $("#results ul").append("<h3>Results for <b>" + articleName + "</b></h3>").text(); 
      $.each(data.query.search, function(i, item) { 
       $("#results").append("<div class='list-group'><a class='list-group-item' href='https://it.wikipedia.org/wiki/" + encodeURIComponent(item.title.replace(" ", "_")) + "' data-toggle='modal' data-target='.bs-example-modal-lg'><h4>" + item.title.replace(" ", "_") + "</h4><p class='list-group-item-text'>" + item.snippet + "</p></a></div>"); 
       $("#results div a").attr("href", "#"); 
      }); 
      $('.modal').on('show.bs.modal', function (e) { 
       $.getJSON("https://it.wikipedia.org/w/api.php?action=parse&format=json&callback=?", { 
        page: $(e.relatedTarget).find('h4').text(), 
        prop:"text" 
       }, function(data) { 
        var markup = data.parse.text["*"]; 
        var blurb = $('<div></div>').html(markup); 
        blurb.find('a').each(function() { 
         $(this).replaceWith($(this).html()); 
        }); 
        blurb.find(".mw-editsection, #toc, .noprint, .thumb, img").remove(); 
        $(".modal-header .modal-title").html(articleName); 
        $(".modal-header .modal-title").promise().done(function(){ 
         $(".modal-title").css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0}); 
        }); 
        $(".modal-body").html($(blurb)); 
        $(".modal-body").promise().done(function(){ 
         $(".modal-content").html(data.parse.text['*']); 
         saveWiki(); 
        }); 
       }); 
      }); 
     }); 
    }); 
    function saveWiki() { 
     $('.modal-body').find().children().on("mouseover", function() { 
     $("this").css("background-color", "yellow"); 
     }); 
    };

來源

2016-11-10 rob.m

你的小提琴與此處顯示的代碼不一樣是不是'modal-body'（大拇指朝下） – caramba

@caramba對不起更新，它是一個更復雜的代碼的一部分，我只是檢查小提琴，而我發佈的問題。幫助仍然需要壽，謝謝 –

的解決方法是改變代碼底部的功能：

function saveWiki() { 
    $(".modal-content *").on("mouseenter", function() { 
    $(this).css("background-color", "yellow"); 
    }).mouseout(function(){ 
    $(this).css("background-color", "white"); 
    }); 
};

來源

2016-11-10 22:06:15

如何加載外部內容並通過js懸停應用css？

回答

相關問題