Question

我有一个全屏背景色div，在我的情况下该ID为＃background-change。

在那个全屏背景中，我得到了3个Divs，分别是.fullscreen-column-1，.fullscreen-column-2等。

现在我想在列上调用mouseoverevent时更改＃background-change的背景图像。

我的代码看起来像这样，但是没有用。

<div id="background-change" data-midnight="dark" data-bg-mobile-hidden="" class="wpb_row vc_row-fluid vc_row full-width-content vc_row-o-full-height vc_row-o-columns-middle vc_row-o-equal-height vc_row-flex  vc_row-o-content-middle standard_section    first-section loaded" style="padding-top: 0px; padding-bottom: 0px; margin-left: -298px; width: 1841px; visibility: visible; min-height: 96.7579vh;"><div class="row-bg-wrap instance-0"><div class="inner-wrap"> <div class="row-bg    " style="" data-color_overlay="" data-color_overlay_2="" data-gradient_direction="" data-overlay_strength="0.3" data-enable_gradient="false"></div></div> </div><div class="col span_12 dark left" style="min-height: 96.7579vh;">
<div class="vc_col-sm-4 fullscreen-column-1 wpb_column column_container vc_column_container col has-animation padding-10-percent instance-0 animated-in" data-border-radius="none" data-shadow="none" data-border-animation="" data-border-animation-delay="" data-border-width="none" data-border-style="solid" data-border-color="#000000" data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="fade-in-from-left" data-delay="500" style="padding-top: 184.094px; padding-bottom: 184.094px; opacity: 1; transform: translate(0px, 0px);"><a class="column-link" href="#"></a>
    <div class="vc_column-inner">
        <div class="wpb_wrapper">
            <h2 style="font-size: 64px;color: #ffffff;text-align: center;font-family:Chivo;font-weight:400;font-style:normal" class="vc_custom_heading" id="testid">About</h2>
        </div> 
    </div>
</div> 
<div class="vc_col-sm-4 wpb_column column_container vc_column_container col no-extra-padding instance-1" data-border-radius="none" data-shadow="none" data-border-animation="" data-border-animation-delay="" data-border-width="none" data-border-style="solid" data-border-color="" data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0">
    <div class="vc_column-inner">
        <div class="wpb_wrapper">
            <h2 style="font-size: 64px;color: #ffffff;text-align: center;font-family:Chivo;font-weight:400;font-style:normal" class="vc_custom_heading">Work</h2>
        </div> 
    </div>
</div> 

<div class="vc_col-sm-4 wpb_column column_container vc_column_container col no-extra-padding instance-2" data-border-radius="none" data-shadow="none" data-border-animation="" data-border-animation-delay="" data-border-width="none" data-border-style="solid" data-border-color="" data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0" style="min-height: 425px;">
    <div class="vc_column-inner">
        <div class="wpb_wrapper">

        </div> 
    </div>
</div> `<div class="vc_col-sm-4 fullscreen-column-1 wpb_column column_container vc_column_container col has-animation padding-10-percent instance-0 animated-in" data-border-radius="none" data-shadow="none" data-border-animation="" data-border-animation-delay="" data-border-width="none" data-border-style="solid" data-border-color="#000000" data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="fade-in-from-left" data-delay="500" style="padding-top: 184.094px; padding-bottom: 184.094px; opacity: 1; transform: translate(0px, 0px);"><a class="column-link" href="#"></a>
    <div class="vc_column-inner">
        <div class="wpb_wrapper">
            <h2 style="font-size: 64px;color: #ffffff;text-align: center;font-family:Chivo;font-weight:400;font-style:normal" class="vc_custom_heading" id="testid">About</h2>
        </div> 
    </div>
</div>`

这是js：

<script type="text/javascript">
document.getElementsByClassName("fullscreen-column-1").onmouseover = function() {
    document.getElementById("background-change").style.backgroundImage = "url('https://mywebsite.de/uploads/image-1.jpg')";
};
</script>

有人解决吗？我无法正常工作，我现在觉得很蠢...

解决方案：发布者：Rajan Patil

for (i = 0; i < document.getElementsByClassName("fullscreen-column-1").length; i++) {
  document.getElementsByClassName("fullscreen-column-1")[i].onmouseover = function() {
      document.getElementById("background-change").style.backgroundImage = "url('your-image-url')";
    }
  }

Answer 1

有一个错字。 getElementsById应该是getElementById

也可以通过以下方式附加事件监听器：

for (i = 0; i < document.getElementsByClassName("fullscreen-column-1").length; i++) {
  document.getElementsByClassName("fullscreen-column-1")[i].onmouseover = function() {
      document.getElementById("background-change").style.backgroundImage = "url('your-image-url')";
    }
  }

Answer 2

您不需要JavaScript。改用CSS。

.fullscreen-column-1 {
  width: 400px;
  height: 1000px;
  background-image: url(https://picsum.photos/400/1000);
  transition: 0.2s ease-in-out;
}

.fullscreen-column-1:hover {
  background-image: url(https://picsum.photos/400/1002)
}

<div class="fullscreen-column-1"></div>

JS OnMouseOver-Event（DIV2）更改BackgroundImage（DIV1）

2 个答案: