CODEWITHSUNDEEP
javascriptjqueryhtml
Dzontra
Dzontra

Reputation: 100

Change parent-parents background on child hover

I have following HTML code:

.background {
    width: 100%;
    height: 800px;
    margin: 0 auto;
    background-image:url("backimage1.jpg");
    background-size: cover;
    }
   <div class="background">
    	<div class="wrapper">
    		<div class="box1">
    			<span class="title">Pozitivan feedback naših klijenata i njihovih potrošača</span><br />
    			<span class="description">Vrhunski kvalitet naših proizvoda</span>
    		</div>
    	</div>
    </div>

What I would like is to when hover on "box1"to change background-image to something else. I know that I can't do that with CSS, tried few things with JS, but seems like I'm only able to select parents element, not parents-parent element though. Any suggestions?

Upvotes: 0

Views: 94

Answers (4)

Hiplobbe
Hiplobbe

Reputation: 148

Just using ".closest()" should be fine, ".parent().parent()" could also be a solution.

$(document).ready(function(){
        $(".box1").mouseover(function(){
        $(this).closest(".background").css("background-image","url('anotherimage.jpg')");
    });
});

$(document).ready(function(){
        $(".box1").mouseover(function(){
        $(this).parent().parent().css("background-image","url('anotherimage.jpg')");
    });
});

Upvotes: 0

Md. Kamruzzaman
Md. Kamruzzaman

Reputation: 1905

document.getElementsByClassName('') can be use to select element by class name.

<html>
  <head>      
     <style>
        .background {
            width: 100%;
            height: 800px;
            margin: 0 auto;
            background-image:url("backimage1.jpg");
            background-size: cover;
            }s
     </style>
     <script type="text/javascript">
         function changeBgMouseOver() {
            var x = document.getElementsByClassName("background");
            x[0].style.backgroundImage = "url('backimage2.jpg')";
         }
         function changeBgMouseOut() {
            var x = document.getElementsByClassName("background");
            x[0].style.backgroundImage = "url('backimage1.jpg')";
         }
     </script>   
  </head>

  <body>
    <div class="background">
        <div class="wrapper">
            <div class="box1" onmouseover="changeBgMouseOver()" onmouseout="changeBgMouseOut()">
                <span class="title">Pozitivan feedback naših klijenata i njihovih potrošaca</span><br />
                <span class="description">Vrhunski kvalitet naših proizvoda</span>
            </div>
        </div>
    </div>    
  </body>
</html>

Upvotes: 1

Zvezdas1989
Zvezdas1989

Reputation: 1465

Here is JQ solution for you it's pretty straightforward:

$(".box1").hover(function(){
    $('.background').css("background", "url(https://placebear.com/200/300)");
    }, function(){
    $('.background').css("background", "url(https://placebear.com/300/300)");
});
.background {
  width: 100%;
  height: 800px;
  margin: 0 auto;
  background-image:url("https://placebear.com/300/300");
  background-size: cover;
}

.box1 {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="background">
    <div class="wrapper">
        <div class="box1">
            <span class="title">Pozitivan feedback naših klijenata i njihovih potrošača</span><br />
            <span class="description">Vrhunski kvalitet naših proizvoda</span>
        </div>
    </div>
</div>

Upvotes: 0

Akhil Thayyil
Akhil Thayyil

Reputation: 9413

Using jquery hover function - changing the background-color :

In your case you can try this with background-image css property

$(document).ready(function(){
$(".box1").hover(function(){
    $(this).parent().css("background-color","coral");
  }, function(){
    $(this).parent().css("background-color","");
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="background">
    <div class="wrapper">
        <div class="box1">
            <span class="title">Pozitivan feedback naših klijenata i njihovih potrošača</span><br />
            <span class="description">Vrhunski kvalitet naših proizvoda</span>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions