在jquery就绪调用函数中应用鼠标悬停代码

applying a mouse hover code at jquery ready call function

本文关键字：应用 鼠标 悬停 代码 函数 jquery 就绪 调用      更新时间：2023-09-26

我尝试应用这个代码：

nextText: '<img src="images/nextImgBtn.png" onmouseover="this.src='images/overnextImgBtn.png'" onmouseout="this.src='images/nextImgBtn.png '">',
prevText: '<img src="images/prevImgBtn.png" onmouseover="this.src='images/hoverprevImgBtn.png '" onmouseout="this.src='images/prevImgBtn.png '">'

到jquery的这个就绪调用函数

$(document).ready(function () {
    $('.slider1').bxSlider({
        slideWidth: 1050,
        minSlides: 1,
        maxSlides: 1,
        slideMargin: 10,
        infiniteLoop: true,
        hideControlOnEnd: false,
        mode: 'horizontal',
        video: true,
        useCSS: false,
        easing: 'easeOutElastic',
        speed: 2000,
        pagerCustom: '#bx-pager',
        nextSelector: '#slider-next',
        prevSelector: '#slider-prev',
        nextText: '<img src="images/nextImgBtn.png" onmouseover="this.src='
        images / hovernextImgBtn.png '" onmouseout="this.src='
        images / nextImgBtn.png '">',
        prevText: '<img src="images/prevImgBtn.png" onmouseover="this.src='
        images / hoverprevImgBtn.png '" onmouseout="this.src='
        images / prevImgBtn.png '">'
    });
});

这只是语法错误，您需要转义引号。尽管这不是最好的解决方案，但它可能会解决你的问题：

nextText: '<img src="images/nextImgBtn.png" onmouseover="this.src=''images/overnextImgBtn.png ''" onmouseout="this.src=''images/nextImgBtn.png ''">',
prevText: '<img src="images/prevImgBtn.png" onmouseover="this.src=''images/hoverprevImgBtn.png ''" onmouseout="this.src=''images/prevImgBtn.png ''">'

Gena的解决方案可能是可行的，而且可能是最好的解决方案。这个应该也适用于

nextText: '<img src="images/nextImgBtn.png" id="slider-next">',
prevText: '<img src="images/prevImgBtn.png" id="slider-prev">

并且在您的css中：

#slider-prev:hover{
  src:url(images/hoverprevImgBtn.png)
}
#slider-next:hover{
  src:url(images/hovernextImgBtn.png)
}

好吧，伙计。我认为你只是在设置文本。实际上，谁知道这个小部件在那里接受什么，可能是一个带选择器的元素的TEXT：

nextSelector: '#slider-next',
prevSelector: '#slider-prev',

你最好试试CSS解决方案

 #slider-next:hover{
    src:url(images/hovernextImgBtn.png)
 }
相关文章：