web-dev-qa-db-ja.com

javascriptまたはjqueryを使用してマウスオーバーしたときに、画像またはボタンをどのように光らせるのですか？

ボタンまたは画像の上にマウスを置いたときに光る効果を追加したい。 javascript、jquery、またはCSSでこれを行うにはどうすればよいですか？これが私が見たいものの例です http://www.flashuser.net/flash-menus/tutorial-flash-glow-buttons-menu.html

誰かがサンプルコードをくれますか？

前もって感謝します

javascriptjqueryhtmlcsseffect
8
user701510

最新のブラウザをターゲットにしても構わない場合は、CSSトランジションとボックスシャドウプロパティを使用できます。JSは必要ありません。

このサイトをチェックしてください：
http://designshack.co.uk/articles/css/5-cool-css-hover-effects-you-can-copy-and-paste
（フェードインと反射が表示されるまで下にスクロールします）

ここのデモ： http://designshack.co.uk/tutorialexamples/HoverEffects/Ex5.html

11
JordanC

投稿するのは決して悪いことではありません Radioactive Buttons 、これは純粋なCSS3です。ただし、Webkitブラウザーのみ（ChromeおよびSafariなど）です。ホバーで光るだけの変更バージョンは次のとおりです。

@-webkit-keyframes greenPulse {
  from { background-color: #749a02; -webkit-box-shadow: 0 0 0 #333; }
  to { background-color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09; }
}

a.green.button {
  background-color: #749a02;
  border-radius: 0.5em;
  color: #fff;
  padding: 0.5em;
  text-decoration: none;
}

a.green.button:hover {
  background-color: #91bd09;
  -webkit-animation-name: greenPulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-box-shadow: 0 0 18px #91bd09;
}

<a href="#" class="green button">Click Me</a>

jsFiddleデモ 。より多くのブラウザーが採用するほど簡単になりますが、それまでは、これはJavaScriptベースのソリューションの単なるアドオンにすぎません。

7
brymck

これはかなり良いjQueryの例とコードです：

http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

4
Colin

CSSを使用しても同じことができます：

[〜＃〜] html [〜＃〜]

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

[〜＃〜] css [〜＃〜] for [〜＃〜] ie [〜＃〜]：

 .opacity_img{
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=45)"; 
  filter:alpha(opacity=45);
 }
 .opacity_img:hover{
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter:alpha(opacity=100);
 }

[〜＃〜] css [〜＃〜]他のブラウザの場合：

 .opacity_img{
  opacity: 0.45;
 }
 .opacity_img:hover{
  cursor:pointer;
  opacity: 1.0;
 }
3
liza

リザは素晴らしい答えを出しました-効果は数行のコードでのみ達成されました。

ただし、さらにスムーズにしたい場合は、次のように追加して、不透明度の遷移をしばらく持続させることができます。

 .opacity_img{
  opacity: 0.45;
  transition: opacity 0.5s;
 }
 .opacity_img:hover{
  cursor:pointer;
  opacity: 1.0;
  transition: opacity 0.5s;
 }
0
asdfgh