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>
            <!-- /.inner -->
          </div>
          <!-- /.icon-box -->
          <div class="text-box">
            <h4>Own Your Customer</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" 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="img/no-dollar_blue.png" id="no_hover" style="width:52px;height:58px; padding-top:12px;"></img>
            </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>
      <!-- /.single-how-app-work -->
    </div>
    <!-- /.how-app-work-content -->
    <a href="https://itunes.apple.com/us/app/bizzalley/id1087241798?ls=1&mt=8" class="download-btn active">
      <i class="fab fa-apple"></i>
      <span class="inner"> <span class="avail">Available on</span> <span class="store-name">App Store</span></span>
    </a>
    <a href="https://play.google.com/store/apps/details?id=com.wildnet.bizzalley" class="download-btn">
      <i class="fab fa-google-play"></i>
      <span class="inner"><span class="avail">Available on</span> <span class="store-name">Google play</span></span>
    </a>
  </div>
  <!-- /.how-app-work-content-wrap -->
</div>
<!-- /.col-md-6 -->

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

选择您的not #custom_image   .active使用#custom_image:not(.active)

使用#no_hover向其子#no_hover: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

仅CSS

将背景图像设置为类
在悬停时更改背景图像

.main-div:hover {
  background-image: url("https://placeimg.com/640/480/tech");
  }
  
.main-div {
            width:200px;
            height:200px;
            background-image: url("https://placeimg.com/640/480/arch");
        }

<div class="main-div"></div>

Answer 4

您不需要使用任何jQuery即可实现所需的功能，都可以使用:hover伪类和类名通过CSS来完成。

这是一个示例...在正常情况下，它将是粉红色的，将鼠标悬停在它的浅蓝色上...然后，如果您单击复选框，它将把activeClass类添加到{{1 }}，以便正常情况下将其显示为红色，而将鼠标悬停时将其显示为常规蓝色。

jQuery仅用于添加/删除类，而其他所有内容都只是CSS ...

<div>

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

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

4 个答案: