Question

我需要就以下问题提供建议：

我们使用wordpress作为网站的后端和滑块附带的主题。我使用带有一些css的滑块让div滑动并在鼠标悬停时显示隐藏的内容（div显示在背景图像的前面）。在stackoverflow中搜索它之后到目前为止这很有用。

我现在需要的是一种功能，可以在mouse-div滑动div内部的div上更改滑块的图像。

HTML看起来像这样（非常简化）：

<div class="ls-wp-fullwidth-container" style="height: 692px;">
<div class="ls-wp-fullwidth-helper" style="height: 692px; width: 1383px; left: 0px;">
    <div id="layerslider_3" class="ls-wp-container ls-container ls-fullwidth" style="margin: 0px auto; visibility: visible; width: 1383px; height: 691.5px;">
        <div class="ls-webkit-hack">
        </div>
        <div class="ls-inner" style="width: 1383px; height: 692px;">
            <div class="ls-layer ls-active" style="left: auto; right: 0px; top: 0px; bottom: auto; width: 1383px; height: 692px; display: none; visibility: visible;">
                <img src="http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/05/Siebdruck-Werkstatt-Winterthur-Zürich.jpg" class="ls-bg" alt="Slide background" style="padding: 0px; border-width: 0px; width: 1660px; height: 922px; margin-left: -830px; margin-top: -461px;">
                <div class="ls-s-1 Highlight1" style="position: absolute; color: rgb(0, 111, 0); border-radius: 20px; white-space: nowrap; opacity: 1; transform: rotate(0deg) scale(1, 1); display: block; visibility: visible; margin-left: 0px; margin-top: 0px; width: 253.55px; height: auto; font-size: 23.05px; line-height: 23.05px; padding: 0px; border-width: 0px; left: 138.3px; top: 507.1px; background: rgb(255, 255, 255);"> 
                    <div id="parent">
                        <center>
                            <br>
                            <br>
                            <h1><a href="./?page_id=18">Siebdruck</a></h1>
                            <ul>
                                <li>Content</li>
                            </ul>
                        </center>
                        <br>
                        <br>
                        <div id="hover-content">
                            <center>
                                <ul>
                                    <li>Content shown on hover</li>
                                </ul>
                                <br>
                                <br>
                            </center>
                        </div>
                    </div> 
                </div>
            </div>
        </div>
    </div>
</div>

我现在要做的是改变中的图像 <div class="ls-layer ls-active> <img src="..."> </div>"

我发现这只能通过使用javascript来实现，所以我尝试了以下内容：

在头文件中使用此代码：

var elem = document.getElementById("parent");
elem.addEventListener("mouseover",mouseOver);
elem.addEventListener("mouseout",mouseOut);
function mouseOver() {
document.getElementByClassName("ls-layer ls- active").style.backgroundImage="url(http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/04/slider_stockfoto_3.jpg)";
}

function mouseOut() {
document.getElementByClassName("ls-layer ls-active").style.backgroundImage = "url(http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/05/Siebdruck-Werkstatt-Winterthur-Z%C3%BCrich.jpg)";
}

没有用，所以我试过了：

function MouseIn() {
document.getElementByClassName("ls-layer ls-active").style.backgroundImage = "url(img/http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/04/slider_stockfoto_3.jpg) no-repeat";
}
function MouseOut() {
document.getElementByClassName("ls-layer ls-active").style.backgroundImage = "url(img/http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/05/Siebdruck-Werkstatt-Winterthur-Z%C3%BCrich.jpg) no-repeat";
}

也没有用，所以我弄乱了名字和ids，但无法弄清楚我做错了什么。

所以，长话短说：当悬停<div class="ls-layer ls-active><img src="..."></div>"时，是否可以在上述结构（<div id="parent"></div>）内更改图像？如果是这样，我明显做错了什么？

如前所述，使用css创建的过渡效果非常好......

我希望你能帮助我，我越来越绝望了。

Answer 1

试试这个：

$("#parent").on({
 "mouseover" : function() {
     $( ".ls-bg" ).attr( "src", "http://placehold.it/350x150" );    
  },
  "mouseout" : function() {
    $( ".ls-bg" ).attr( "src", "http://placehold.it/950x150" );
  }
});

HTML：

<div id="parent">
    <img src="http://placehold.it/950x150" class="ls-bg" alt="Slide background">
</div>

更新--- 看看你的问题，我修改了我的代码。我想这就是你想要的： JSFIDDLE

在鼠标悬停时更改滑块图像

1 个答案: