Изменение слайдера изображения при наведении курсора мыши на виде DIV

Question

Мне нужен совет по следующему вопросу:

Мы используем WordPress в качестве внутреннего интерфейса для веб-сайта и темы, которая приходит с помощью ползунка. Я использую этот слайдер с некоторым css, чтобы позволить divs продвигаться вверх и показывать скрытый контент при наведении мыши (divs отображаются перед фоновым изображением). Это прекрасно работает до сих пор после поиска его здесь в stackoverflow.

Теперь мне нужна функциональность, которая изменяет изображение слайдера при наведении указателя на 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, поэтому я попробовал следующее:

Использование этого кода i Заголовочный файл на:

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

Не работает, как хорошо, так что я возился с именами и идентификаторами, но не мог понять, что Я делаю неправильно.

Итак, длинный рассказ: возможно ли изменить изображение в пределах структуры, указанной выше (<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> 

UPDATE --- Глядя на ваш вопрос, я изменил мой код. Я думаю, что это то, что вы хотите: JSFIDDLE