Question

目前，当我将鼠标悬停在三个不同的按钮上时，我的<div>背景图像会发生变化。每个按钮显示不同的图像。到目前为止，这个功能很好，但我也喜欢在点击按钮时留下悬停的背景图像，这样即使我的鼠标离开按钮，悬停状态仍保持活动状态（除非我将鼠标悬停在新按钮上）。有什么建议？看看我的JSFiddle。

＆＃13;

$(document).ready(function() {
  $(".content-box-column-1").hover(
    function() {
      $('#shows').css('background-image', 'url(https://www.petfinder.com/wp-content/uploads/2012/11/125950112-adopt-second-cat-632x475.jpg)');
    },
    function() {
      $('#shows').css('background-image', 'url(https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg)');
    }
  );
  $(".content-box-column-2").hover(
    function() {
      $('#shows').css('background-image', 'url(https://www.petfinder.com/wp-content/uploads/2012/11/99059361-choose-cat-litter-632x475.jpg)');
    },
    function() {
      $('#shows').css('background-image', 'url(https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg)');
    }
  );
  $(".content-box-column-3").hover(
    function() {
      $('#shows').css('background-image', 'url(https://www.wired.com/wp-content/uploads/2014/10/cathug.jpg)');
    },
    function() {
      $('#shows').css('background-image', 'url(https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg)');
    }
  );
  $(".buttons").hover(function() {
    $(this).toggleClass("active");
  });
});

＆＃13;

#container {
  display: table;
  font-weight: bold;
  text-transform: uppercase;
}
.buttons {
  width: 30%;
  height: 200px;
  display: table-cell;
  vertical-align: middle;
  margin: 1%;
  text-align: center;
}
#shows {
  height: 300px;
  width: 400px;
  background: #bada55;
  background-size: cover;
  position: fixed;
  margin: 0 auto;
  transition: background .2s ease-in-out;
  background-image: url(https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg);
}
.active {
  color: #bada55;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="content-box-column-1 buttons">
    <p>Cat Lick</p>
  </div>
  <div class="content-box-column-2 buttons">
    <p>Cat on a Couch</p>
  </div>
  <div class="content-box-column-3 buttons">
    <p>It's a Cat Hug!</p>
  </div>
</div>

<div id="shows" style="background-image: url(&quot;https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg&quot;);"></div>

＆＃13;

Answer 1

我相信这可以做你想要的......

您可以使用jQuery的.click()方法绑定click事件处理程序。

您必须将当前图像存储在单击其他按钮时更改的变量中。

另外，为了防止重复，您可以使用jQuery的.each()方法迭代所有按钮并将事件处理程序绑定到它们。

$(document).ready(function() {
  var images = [
    'https://www.petfinder.com/wp-content/uploads/2012/11/125950112-adopt-second-cat-632x475.jpg',
    'https://www.petfinder.com/wp-content/uploads/2012/11/99059361-choose-cat-litter-632x475.jpg',
    'https://www.wired.com/wp-content/uploads/2014/10/cathug.jpg'
  ];

  var currentImage = 'https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg';

  var $shows = $('#shows');
  var $buttons = $(".buttons")
  
  $buttons.each(function (index) {
    $(this)
      .hover(function() {
        $shows.css('background-image', 'url(' + images[index] + ')');
      }, function() {
        $shows.css('background-image', 'url(' + currentImage + ')');
      })
      .click(function() {
        currentImage = images[index];
        $shows.css('background-image', 'url(' + currentImage + ')');
      });
  });

  $buttons.click(function() {
    $buttons.removeClass('active');
    $(this).addClass('active');
  });
});

#container {
  display: table;
  font-weight: bold;
  text-transform: uppercase;
}
.buttons {
  width: 30%;
  height: 200px;
  display: table-cell;
  vertical-align: middle;
  margin: 1%;
  text-align: center;
}
.buttons:hover,
.active {
  color: #bada55;
}
#shows {
  height: 300px;
  width: 400px;
  background: #bada55;
  background-size: cover;
  margin: 0 auto;
  transition: background .2s ease-in-out;
  background-image: url(https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg);
}

<div id="container">
  <div class="buttons">
    <p>Cat Lick</p>
  </div>
  <div class="buttons">
    <p>Cat on a Couch</p>
  </div>
  <div class="buttons">
    <p>It's a Cat Hug!</p>
  </div>
</div>

<div id="shows" style="background-image: url(&quot;https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg&quot;);"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

$(".buttons").click(function() {
  var $this = $(this);
  $('#shows').css('background-image', $this.data('imageurl'));
});

<div id="container">
  <div class="content-box-column-1 buttons" data-imageurl="https://www.petfinder.com/wp-content/uploads/2012/11/125950112-adopt-second-cat-632x475.jpg">
    <p>Cat Lick</p>
  </div>
  <div class="content-box-column-2 buttons" data-imageurl="https://www.petfinder.com/wp-content/uploads/2012/11/99059361-choose-cat-litter-632x475.jpg">
    <p>Cat on a Couch</p>
   </div>
  <div class="content-box-column-3 buttons" data-imageurl="https://www.wired.com/wp-content/uploads/2014/10/cathug.jpg">
    <p>It's a Cat Hug!</p>
  </div>
</div>

div中的图像可以在点击和悬停时更改

2 个答案: