15年以上前の仕様 jQuery, JavaScript でマウスオーバ「しか」操作していないモノを駆逐せよ

現在の更新作業担当しているサイトで、「そんなにマウスオーバーに fade 付けたかったん？」という jQuery が、散見される（ゲンナリ）。
MIT やから使ったか知らんけど、2009年て。ヲマエ、2019年ぐらいに作ってんちゃうんけ、コレ…。ソース配布場所が、ドメインごと消えてるしな…。

という愚痴は置いといて。

今や、CSS『のみ』で余裕で置き換えられるので、とっとと jQuery 記述を削除して、CSS を搭載し、無駄な JS 発火を減らすのがベター。いや、ベスト。
幸いにも、jQuery の発火に、.hov という class が付いていた。共通 CSS が存在するようであれば、.hov に CSS を追加して対応を進めるべきかと。

(".hov").hover(function(){}

head 内などで、既存取扱いサイトで存在している

<script>	
jQuery(document).ready(
  function(){
    jQuery(".hov").hover(function(){
       jQuery(this).fadeTo("normal", 0.6); // マウスオーバー時にmormal速度で、透明度を60%にする
    },function(){
       jQuery(this).fadeTo("normal", 1.0); // マウスアウト時にmormal速度で、透明度を100%に戻す
    });
  });
</script>

という script が存在したら、（ちなみに、mormal速度って何な？ ってなる。コメントすらエラーしている、もはやプログラマーとしても、頭脳的にどうなのか案件…）
先に CSS ファイルを探し

.hov {
	transition: all .6s;
	opacity: 1;
}
.hov:hover {opacity: .6;}

を追記。
基本的には、コレで、上記 jQuery の動作と同等の機能を果たす。

rollover.js

正規表現でマッチさせて、などがあり、やたら長い。

/* --------------------------------------------------------------------------
	last update: 09/06/16
																	created by edo.
	
	This script attach the rollover effect to image on 'rollover' class.
	This is distributed by the MIT license.
	
	URL: http://css-eblog.com/
----------------------------------------------------------------------------- */

(function() {
var filename = 'rollover.js';
var _className = 'rollover';

function getJsParam() {
	//get scripts list.
	var scripts = document.getElementsByTagName( 'script' );
	var script;
	var params = {};
	
	//pickup this file.
	for ( var i=0; i<scripts.length; i++ ) {
		var s = scripts.item( i );
		if( s.src.indexOf( filename ) !== -1 ) {
			script = s;
			break;
		}
	}
	
	if( script ) {
		script.src.match( /(.*)(\?)(.*)/ );
		if( RegExp.$3 ) {
			var a = RegExp.$3.split( '&' );
			if( a ) {
				for( var k=0; k<a.length; k++ ) {
					var p = a[ k ].split( '=' );
					if( p[0] ) {
						params[ p[0] ] = p[1];
					}
				}
			} else {
				return false;
			}
		} else {
			return false;
		}
	} else {
		return false;
	}
	
	return params;
}

function addEvent( node, evt, handler ) {
	try {
		if( node.addEventListener ) {
			node.addEventListener( evt, handler, false );
		} else {
			node.attachEvent( 'on' + evt, handler );
		}
	} catch( e ) {}
}

function setEvent( ele, ty ) {
	ele.originalSrc = ele.src;
	ele.originalSrc.match( /^(.*)(\.{1}.*)/g );
	ele.hoverSrc = RegExp.$1 + ty + RegExp.$2;
	addEvent( ele, 'mouseover', function( evt ) {
		var tar = evt.target || evt.srcElement;
		tar.src = tar.hoverSrc;
	});
	addEvent( ele, 'mouseout', function( evt ) {
		var tar = evt.target || evt.srcElement;
		tar.src = tar.originalSrc;
	});
}

function startRollover() {
	var jParam = getJsParam();
	var jType = jParam.type ? jParam.type : '_on';
	var imgs = document.getElementsByTagName( 'img' );
	for( var i=0; i<imgs.length; i++ ) {
		if( imgs[i].className.indexOf( _className ) !== -1 ) {
			setEvent( imgs[i], jType );
		}
	}
}

addEvent( window, 'load', startRollover );
})();

作成者情報の URI は、もはや存在しない。
したがって、そのスクリプトは、期限切れだと判断するほうが良いと考える。

前半の jQuery 同様、class に rollover が付けられたモノに対して、発火しているので、CSS で対処。

.rollover {
	transition: all .6s;
	opacity: 1;
}
.rollover:hover {opacity: .6;}

transition の有無やタイミングは、サイトの他の部分に合わせる。
基本は、無くて良いと思っている。

個人的には、ふわっと来るの、大嫌い。
シャキっと出やがれ！　て思う。