widthを％指定した時のマウスオーバーのバグ

今仕事でレスポンシブなwebデザインをしています。一つ一つの画像の横幅を％で指定しているのでブラウザの横幅を縮めていくとレイアウトが崩れずに画像も小さくなっていきますが、この画像にjqueryでマウスオーバーを設定すると(画像に_on_offつけるだけの簡単なやつありますよね？)マウスオーバーで出てくる_onの画像が縮小されないで出てくるのです。なので小さい画像の上にいきなり原寸サイズの画像が半透明で被さるように出てきます。このせいでスマホで見たときにマウスオーバーがおかしくなるし、横スクロールバーが出てしまい、大変なことになります。

画像のwidthを％表示したときのマウスオーバーで安全なやり方はありますか？画像を入れ替えなくてもちょっと白っぽく明るくするだけでもいいんですが。

No.1 回答者： hue2011 回答日時： 2014/09/06 09:17

レスポンシブでやるならCSSが活躍していると思いますが、hoverは使わないのでしょうか。

もちろん、これをやると、PCで見た場合ブラウザがIE6だったりすると何も起きないことにはなりますけど。
なぜか7月ぐらいまではIE6を使っている人もだいぶいましたけど、ここのところはいなくなりました。
IEだと９以上です。だったらCSS3は大丈夫です。

No.2 回答者： fufufunofufufu 回答日時： 2014/09/12 18:02

$(function(){

$('a img').hover(function(){
$(this).attr('src', $(this).attr('src').replace('_off', '_on'));
}, function(){
$(this).attr('src', $(this).attr('src').replace('_on', '_off'));
});
});

mouseenter() mouseleave()などもありますが。

どんな風に記述しているのかわからないのでなんともいえないですが。
上記のような感じですかね？
どんな状況でバグなのでしょうか？


以前、ギャラクシー端末で、
imgのwidthをhtmlで指定をせずcssでのみ行うと画像が大きくはみ出るみたいな事象は見たことがあります。

●HTMLで指定
<img src="img/img.png" alt="image" width="80%">

上記のように書けばOKだけど、

●CSSで指定
<style>
img{ width: 80%;}
</style>

<img src="img/img.png" alt="image">

cssのみでの指定だと、端末により表示崩れが起きる。


あと他の方がおっしゃるように、cssでもできますので、そちらもよいと思います。
ただ、テキスト置き換えbackground指定をCSSで行う場合、
スマホで見る場合を考慮して、
@media (-webkit-min-device-pixel-ratio: 2),(min--moz-device-pixel-ratio: 2),(-o-min-device-pixel-ratio: 2/1)
といった感じで、レティーナ液晶用の指定もしてあげたほうがよいので、数が多いと面倒かもしれません。

CSSのopacity(IEは8以降)で透過させるのもよいと思います。

ただ、どちらにしても、HTMLでの画像の横幅指定は行ったほうがよいかと思います。
hover関係ない事象でしたので。