Question

我有以下HTML代码：

.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>

我希望将鼠标悬停在“box1”上以将背景图像更改为其他内容。我知道我不能用CSS做到这一点，用JS尝试了一些东西，但似乎我只能选择父元素，而不是父母 - 父元素。有什么建议吗？

Answer 1

使用jquery悬停功能 - 更改背景颜色：

在您的情况下，您可以尝试使用background-image css属性

$(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>

Answer 2

document.getElementsByClassName（＆＃39;＆＃39;）可用于按类名选择元素。

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

Answer 3

以下是适用于您的JQ解决方案，非常简单：

＆＃13;

if useUnsecuredWebsockets:
 tTransport= "websockets"
 tPort= 80
else:
 tTransport = "tcp"
 tPort= 1883

＆＃13;

$(".box1").hover(function(){
    $('.background').css("background", "url(https://placebear.com/200/300)");
    }, function(){
    $('.background').css("background", "url(https://placebear.com/300/300)");
});

＆＃13;

.background {
  width: 100%;
  height: 800px;
  margin: 0 auto;
  background-image:url("https://placebear.com/300/300");
  background-size: cover;
}

.box1 {
  cursor: pointer;
}

＆＃13;

Answer 4

只需使用＆＃34; .closest（）＆＃34;应该没问题，＆＃34; .parent（）。parent（）＆＃34;也可以是一个解决方案。

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

更改子徘徊的父母 - 父母背景

4 个答案: