Question

我有5个图像我需要的动作是悬停和点击特定图像的颜色变化，休息将像非活动一样，如果我点击新图像，新图像颜色应该改变，休息将是非活动模式（上一个颜色），图片演示在example给出我不知道如何做到这一点，请一步一步给我。

请帮帮我提前谢谢..

Answer 1

$(document).ready(function() {
    // Below code will be executed when you hover or click on image
    $('img').on('hover click', function(e) {
        // Remove active Class From All Image
        $('img').removeClass("active");
        // Add Active Class To Image on which you hover or click
        $(this).addClass("active")
    });
})

Answer 2

不止一种方法可以做到这一点。我提供了一个CSS示例和一个JQuery示例：https://jsfiddle.net/Twisty/vg3usoff/1/

<强> HTML

<p>
  Example One:
</p>
<div id="myNews-wrapper">
</div>
<p>
  Example Two:
</p>
<img id="myNews-2" src="http://i.stack.imgur.com/Otx1B.png" />

<强> CSS

div#myNews-wrapper {
  width: 72px;
  height: 72px;
  overflow: hidden;
  background-image: url('http://i.stack.imgur.com/Otx1B.png');
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

div#myNews-wrapper:hover {
  background-position: -73px 0px;
}

div#myNews-wrapper:active {
  background-position: -146px 0px;
}

<强> JQuery的

function makeSprite(img, w, h) {
  if (img === '' || typeof img === 'undefined') {
    return false;
  }
  var wrapId = img.attr('id') + "-wrapper";
  var wrap = $("<div>", {
    'id': wrapId
  });
  wrap.css({
    'width': w,
    'height': h,
    'overflow': "hidden",
    'background-image': "url('" + img.attr("src") + "')",
    'background-repeat': "no-repeat",
    'background-position': "0px 0px"
  });
  img.hide();
  img.after(wrap);
  return wrap;
}

$(function() {
  var myDiv = makeSprite($("#myNews-2"), 72, 72);
  myDiv.hover(function(e) {
    $(this).css("background-position", e.type === "mouseenter" ? "-73px 0px" : "0px 0px");
  });
  myDiv.click(function() {
    $(this).css("background-position", "-146px 0px");
  });
});

我不知道你想要用这个兔子洞走多远。我写了一篇关于这个的教程可能会有所帮助：http://64.78.10.120/html/button_sprite.html在我看来，CSS更快更容易使用Sprites。但是根据控制级别，您可能希望使用JQuery来处理更多事件或操作。

您的部分评论建议您使用WordPress，这就是为什么JQuery示例与我制作的一样复杂。如果您的现有WP帖子中已包含图片，并且您正在添加它，则可能无法将img标记换成div标记以制作CSS很容易。

如果这是有道理的，请告诉我。

<强>更新

根据您的评论，我创建了这个：https://jsfiddle.net/Twisty/uznj5y4r/6/

<a href="#tab1">
  <img id="mynews" onclick="changeImage(this)" src="http://www.newshoresschoolbangalore.in/wp-content/uploads/2016/01/newss.png" width="182" height="86" />
</a>

<a href="#tab2" style="font-family:rockwell;font-weight: 400;font-size: 16px;">
  <img id="myevent" onclick="changeImage(this)" src="http://www.newshoresschoolbangalore.in/wp-content/uploads/2016/01/events.png" width="182" height="86">
</a>

<a href="#tab3">
  <img id="mytwit" onclick="changeImage(this)" src="http://www.newshoresschoolbangalore.in/wp-content/uploads/2016/01/twitters.png" width="182" height="86" />
</a>
<script>
function changeImage(elem) {
    var image = elem.src;
    var img0 = "http://www.newshoresschoolbangalore.in/wp-content/uploads/2016/01/newss.png";
    var img0Hover = "http://www.newshoresschoolbangalore.in/wp-content/uploads/2016/01/news-hovers.png";
    var img1 = "http://www.newshoresschoolbangalore.in/wp-content/uploads/2016/01/events.png";
    var img1Hover = "http://www.newshoresschoolbangalore.in/wp-content/uploads/2016/01/eventshovers.png";
    var img2 = "http://www.newshoresschoolbangalore.in/wp-content/uploads/2016/01/twitters.png";
    var img2Hover = "http://www.newshoresschoolbangalore.in/wp-content/uploads/2016/01/twitter-hovers.png";

    switch (image) {
      case img0:
        document.getElementById('mynews').src = img0Hover;
        document.getElementById('myevent').src = img1;
        document.getElementById('mytwit').src = img2;
        break;
      case img1:
        document.getElementById('mynews').src = img0;
        document.getElementById('myevent').src = img1Hover;
        document.getElementById('mytwit').src = img2;
        break;
      case img2:
        document.getElementById('mynews').src = img0;
        document.getElementById('myevent').src = img1;
        document.getElementById('mytwit').src = img2Hover;
        break;
      default:
        document.getElementById('mynews').src = img0;
        document.getElementById('myevent').src = img1;
        document.getElementById('mytwit').src = img2;
        break;
    }
}
</script>

jquery onhover图像更改，具有活动的非活动功能

2 个答案: