Question

我有一个非常简单的jQuery代码片段。

看起来像这样：

$(document).ready(function() {                
   jQuery('.mh_img_box2').closest('.mh_img_box1').hover(function () {
       console.log("click");
       jQuery(this).find('.sp_product-note, .sp_product-note2 ').show();
       jQuery(this).addClass('hover-image');
       console.log("click");
   })

   jQuery('.mh_img_box2').closest('.mh_img_box1').mouseleave(function (){
       jQuery('.sp_product-note, .sp_product-note2').hide();
       jQuery(this).removeClass('hover-image');
   })
});

使用此代码，我只想在鼠标位于相应元素上时显示悬停文本。

不幸的是它只能在调试模式下工作。

您可以在此处查看该网站：

http://v4.machhoerndl-kaffee.de/sw/

感谢您的帮助。

Answer 1

您需要在单个hover事件处理程序代码中压缩代码，如下所示： -

$(document).ready(function(){
    $('.mh_img_box1').hover(function () {
        $(this).find('.sp_product-note, .sp_product-note2 ').show();
        $(this).addClass('hover-image');
    },function(){
        $(this).find('.sp_product-note, .sp_product-note2 ').hide();
        $(this).removeClass('hover-image');
    });
});

注意： - 我已在您的网站上查看此代码

1.在控制台中添加代码以检查： - https://prnt.sc/j52qtx

2.现在我将鼠标悬停在方框上： - https://prnt.sc/j52r45

3.当我将盒子悬停时： - https://prnt.sc/j52rae

Answer 2

根据您的代码，我看到您使用 AJAX 调用来呈现您的内容，

因此$(window).on("load",function () {上面的代码无效，

因此，对于您的代码，只有在渲染html内容之后（在ajax响应到来之后以及渲染html代码完成之后）才需要绑定悬停事件。

渲染html后调用以下函数

$('.mh_img_box1').bind({
        mouseenter: function () {
            $(this).find('.sp_product-note, .sp_product-note2').show();
            $(this).addClass('hover-image');
        },
        mouseleave:function(){
        $(this).find('.sp_product-note, .sp_product-note2').hide();
        $(this).removeClass('hover-image');
        }
    });

对于ajax呼叫模拟，请单击渲染数据按钮。

function renderData(){
	//Code which execute on ajax response 
	var s = 
	    '<div class="mh_img_box1">'
	    +'<div class="mh_img_box2" style="position:absolute;">'
		+' <picture> '
			+' <img class="mh_box_emotion_img" src="http://v4.machhoerndl-kaffee.de/sw/media/image/e2/2c/c6/prod_600x600.jpg" alt="BRASILIEN Samambaia 		Recipe No. 2">'
		+' </picture> '
		+' <div class="sp_product-note" style="display: none;">schokoladig, nussig</div> '
		+' <div class="sp_product-note2" style="display: none;">ab 12,00 EUR</div> '
	+' </div> '
	+' </div> ';
	
	document.getElementById("content").innerHTML=s;
	//Above line render the html, now bind the hover event as below
	$('.mh_img_box1').bind({
        mouseenter: function () {
            $(this).find('.sp_product-note, .sp_product-note2').show();
            $(this).addClass('hover-image');
        },
        mouseleave:function(){
        $(this).find('.sp_product-note, .sp_product-note2').hide();
        $(this).removeClass('hover-image');
        }
    });
}

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
  
<input type="button" value="Render Data" onclick="renderData();"/>
		<div id="content"/>
	 </div>

jquery仅在调试模式下有效

2 个答案: