Изменить фоновое изображение при наведении курсора мыши, когда класс активен и неактивен

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 для достижения того, чего вы хотите, все это можно сделать с помощью 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>

Answer 3

ТОЛЬКО CSS

1. Установить background-image в класс
2. Изменить background-image при наведении

.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 или 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 вместо идентификатора #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>