当班级处于活动状态和非活动状态时更改鼠标悬停的背景图像

Question

我想在鼠标悬停和鼠标移开时更改 div 元素的背景图像。此外，当 div 元素处于活动状态时，它应该只使用一张图片。这可以通过 Jquery 或 Javascript 来实现吗？上面是 HTML 代码，其中所有三个项目都具有相同的类名，但我添加了自定义图像而不是图标var div1 = document.getElementById("custom_image");var div2 = document.getElementById("inner_id");setInterval(function() {  if ($('#custom_image').hasClass("active")) {    div2.onmouseover = function() {      $(div2).find("[id=no_hover_]").attr("src", "img/no-dollar_white.png");    };    div2.onmouseout = function() {      $(div2).find("[id=no_hover]").attr("src", "img/no-dollar_white.png");    };  } else {    div2.onmouseover = function() {      $(div2).find("[id=no_hover_]").attr("src", "img/no-dollar_white.png");    };    div2.onmouseout = function() {      $(div2).find("[id=no_hover]").attr("src", "img/no-dollar_blue.png");    };  }}, 1);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="col-md-6">  <div class="how-app-work-content-wrap">    <div class="title">      <h3>How are we different?</h3>    </div>    <!-- /.title -->    <div class="how-app-work-content" id="how-app-work-slider-pager">      <a href="#" class="pager-item active" data-slide-index="0">        <div class="single-how-app-work ">          <div class="icon-box">            <div class="inner">              <i class="far fa-thumbs-up"></i>            </div>            <!-- /.inner -->          </div>          <!-- /.icon-box -->          <div class="text-box">            <h4>Be Independent</h4>            <p>We use a customized application tobe <br /> specifically designed a testing gnose <br /> to keep away for people.</p>          </div>          <!-- /.text-box -->        </div>      </a>      <!-- /.single-how-app-work -->      <a href="#" class="pager-item" data-slide-index="1">        <div class="single-how-app-work">          <div class="icon-box">            <div class="inner">              <i class="far fa-handshake-o"></i>            </div>

Answer 1

请使用 css3 来实现您想要的结果，这是简单而有效的方法。

.myclass {

  margin-top: 100px;

  width: 100%;

}

.myclass:hover {

  background: url("https://img.etimg.com/thumb/msid-68333505,width-643,imgsize-204154,resizemode-4/googlechrome.jpg");

}

<div class="myclass">

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor

  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,

  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore

  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat

  non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

  ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit

  anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur

  adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit

  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

Answer 2

无需使用 jquery 或 javascript。您应该使用 CSS 完成此操作。

你需要做的是：

将您的更改img为div带有背景图像的

选择您#custom_image这是不 .active使用#custom_image:not(.active)

添加一个悬停其子#no_hover使用#no_hover:hover

这意味着以下 CSS 选择器：#custom_image:not(.active) #no_hover:hover.

要改变形象，如果#custom_image是.active，你必须选择孩子#no_hover的#custom_image这是.active。

您将使用 #custom_image.active #no_hover

// for example only:

document.getElementById('toggle-active').onclick = function() {

  document.getElementById('custom_image').classList.toggle('active');

  document.getElementById('active-info').innerHTML = document.getElementById('custom_image').classList.contains('active') ? 'active' : 'not active';

}

#no_hover {

  width: 52px;

  height: 58px;

  padding-top: 12px;

  background-image: url('https://via.placeholder.com/150/EEEEEE/EEEEEE');

  background-size: cover;

}

#custom_image:not(.active) #no_hover:hover {

  background-image: url('https://via.placeholder.com/150/0000FF/0000FF');

}

#custom_image.active #no_hover {

  background-image: url('https://via.placeholder.com/150/0000FF/0000FF');

}

<!-- for example only -->

<button id="toggle-active">Toggle Active</button> #custom_image is <span id="active-info" style="font-weight: bold; color: red;">not active</span>

<hr />

<a href="#" class="pager-item" id="custom_image" data-slide-index="2">

  <div class="single-how-app-work ">

    <div class="icon-box">

      <div class="inner" id="inner_id">

        <!-- /.inner <i class="fas fa-dollar-sign"></i>-->

        <!-- img src="https://via.placeholder.com/150/FFFFFF/000000" id="no_hover" style="width:52px;height:58px; padding-top:12px;" /-->

        <div id="no_hover"></div>

      </div>

      <!-- /.inner -->

    </div>

    <!-- /.icon-box -->

    <div class="text-box">

      <h4>No Commission</h4>

      <p>We use a customized application tobe <br /> specifically designed a testing gnose <br /> to keep away for people.</p>

    </div>

    <!-- /.text-box -->

  </div>

</a>

以下代码段是一个使用字体真棒图标并使用类.pager-item而不是 id的示例 #custom_image。

// for example only:

document.getElementById('toggle-active').onclick = function() {

  document.getElementById('custom_image').classList.toggle('active');

  document.getElementById('active-info').innerHTML = document.getElementById('custom_image').classList.contains('active') ? 'active' : 'not active';

}

.pager-item .inner i {

  font-size: 50px;

  padding-top: 12px;

  background-size: cover;

  color: #0000FF;

}

.pager-item:not(.active) .inner i:hover {

  color: #CCCCCC;

}

.pager-item.active .inner i {

  color: #0000FF;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<!-- for example only -->

<button id="toggle-active">Toggle Active</button> .pager-item is <span id="active-info" style="font-weight: bold; color: red;">not active</span>

<hr />

<a href="#" class="pager-item" id="custom_image" data-slide-index="2">

  <div class="single-how-app-work ">

    <div class="icon-box">

      <div class="inner" id="inner_id">

        <i class="fa fa-stack-overflow"></i>

      </div>

      <!-- /.inner -->

    </div>

    <!-- /.icon-box -->

    <div class="text-box">

      <h4>No Commission</h4>

      <p>We use a customized application tobe <br /> specifically designed a testing gnose <br /> to keep away for people.</p>

    </div>

    <!-- /.text-box -->

  </div>

</a>

Answer 3

你不需要使用任何 jQuery 来实现你想要的，这一切都可以通过 CSS 使用:hover伪类和类名来完成。

这是一个例子......正常情况下它会是粉红色的，将鼠标悬停在它上面是浅蓝色......然后如果你点击复选框，它会将activeClass类添加到<div>以便正常情况下它会是红色，带有悬停它是正常的蓝色。

jQuery 纯粹用于添加/删除类，但其他一切都只是 CSS ...

$(function(){

  $("#changeClass").on("click", function() {

    $("#myDiv").toggleClass("activeClass", $(this).is(":checked"));

  });

});

#myDiv {

  padding:50px;

  /* Normal, pink */

  background-color:pink;

}

#myDiv:hover {

  /* Hover, lightblue */

  background-color:lightblue;

}

#myDiv.activeClass {

  /* Normal + active, red */

  background-color:red;

}

#myDiv.activeClass:hover {

  /* Hover + active, blue */

  background-color:blue;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" id="changeClass" /><br/>

<div id="myDiv">

  Hello World

</div>