Question

我正尝试3种不同的鼠标操作（mouseout，mouseenter和onclick），如果用户点击图像，则应阻止mouseout事件。

<div class="side-thumbnail">
 <img src="http://dev.kis-com.ch/wp-content/uploads/2015/08/andreas-front-bw.png" onmouseover="this.src='http://dev.kis-com.ch/wp-content/uploads/2015/08/andreas-front-active.png'" onmouseout="this.src='http://dev.kis-com.ch/wp-content/uploads/2015/08/andreas-front-bw.png'" alt="face" class="small-faceHit" data-id="firstpeople"> <br>
 <img src="http://dev.kis-com.ch/wp-content/uploads/2015/08/08Georg-Front.png" onmouseover="this.src='http://dev.kis-com.ch/wp-content/uploads/2015/08/08Georg-Front-Active.png'" onmouseout="this.src='http://dev.kis-com.ch/wp-content/uploads/2015/08/08Georg-Front.png'" alt="face" class="small-faceHit" data-id="secondpeople"> <br>
.................
</div>

您可以在here

中看到完整的代码

Answer 1

你可以在不使用每个项目的两个图像的情况下实现这一点，但它需要一点点javascript。

基本上，您只是加载彩色图像并应用CSS过滤器使图像看起来是灰度

$(document).on('click', '.greyscale', function(){
    $('.side-thumbnail img').each(function(){
        if(!$(this).hasClass('greyscale'))
        {
            $(this).addClass('greyscale');
            $(this).removeClass('selected');
        }
    });
    $(this).removeClass('greyscale');
    $(this).addClass('selected');
});

img{width:150px;}

.greyscale{
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}


.greyscale:hover, .selected{
    -webkit-filter: grayscale(0%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="side-thumbnail">

    <img src="http://dev.kis-com.ch/wp-content/uploads/2015/08/andreas-front-active.png" alt="face" class="small-faceHit greyscale" data-id="firstpeople"> <br>
   
    <img src="http://dev.kis-com.ch/wp-content/uploads/2015/08/08Georg-Front-Active.png" alt="face" class="small-faceHit greyscale" data-id="secondpeople"> <br>

    <img src="http://dev.kis-com.ch/wp-content/uploads/2015/08/02-Naomi-Front-Active.png" alt="face" class="small-faceHit greyscale" data-id="thirdpeople">

</div>

Answer 2

使用CSS过滤器的基于CSS的干净解决方案。

https://jsfiddle.net/f1b3ugo5/

CSS：

img{width:150px;}

img.active, img.inactive:hover {
  filter:none;
-webkit-filter: none;
-moz-filter: none;
-ie-filter: none;
-o-filter: none;
}
img.inactive {
filter:url("data:image/svg+xml;utf8,<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><filter id=\"grayscale\"><feColorMatrix type=\"matrix\" values=\"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\"/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ie-filter: grayscale(100%);
-o-filter: grayscale(100%);

}

JS：

'use strict';

var add_events = function( img, opts ){
  this.image = img;
  this.setup_listener();
  return this;
}
add_events.prototype.activate = function(){
    this.image.classList.remove('inactive');
    this.image.classList.add('active');
};
add_events.prototype.deactivate = function(){
    this.image.is_active = false;
    this.image.classList.remove('active');
    this.image.classList.add('inactive');
};
add_events.prototype.setup_listener = function(){
  var _this = this;
  this.image.addEventListener('click',function(e){
    add_events.deactivate_all( _this );
    if( this.is_active ){ 
    _this.deactivate();
    }
    else{ 
    this.is_active = true;
    _this.activate();
    }
  },false);
};

add_events.deactivate_all = function( current ){
  for( var i = 0; i < holder.length; ++i ){
    if(holder[i]===current){}
    else{ holder[i].deactivate(); }
  }
};

var holder = [], images = document.querySelectorAll( '.small-faceHit' );
for( var i = 0; i < images.length; ++i ){
  holder.push(new add_events( images[i], {}) );
}

HTML：

<div class="side-thumbnail">

<img src="http://dev.kis-com.ch/wp-content/uploads/2015/08/andreas-front-active.png" alt="face" class="small-faceHit inactive" id="toggle-image" data-id="firstpeople">

<img src="http://dev.kis-com.ch/wp-content/uploads/2015/08/andreas-front-active.png" alt="face" class="small-faceHit inactive" id="toggle-image" data-id="firstpeople">

<img src="http://dev.kis-com.ch/wp-content/uploads/2015/08/andreas-front-active.png" alt="face" class="small-faceHit inactive" id="toggle-image" data-id="firstpeople">

<img src="http://dev.kis-com.ch/wp-content/uploads/2015/08/andreas-front-active.png" alt="face" class="small-faceHit inactive" id="toggle-image" data-id="firstpeople">

</div>

如果按下onclick，则阻止mouseout事件监听器

2 个答案: