Question

我尝试应用此代码：

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 '">'
    });
});

Answer 1

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

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

你最好试试CSS解决方案

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

Answer 2

它的语法错误，你需要逃避引号。即使它不是最好的解决方案，它应该可以解决您的问题：

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)
}

在jquery ready call函数中应用鼠标悬停代码

2 个答案: