CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

インラインCSSを使用してホバー効果をどのようにコーディングしますか？

インラインCSSを作成せざるを得ない場合があります。 HTMLメールテンプレートで—メール/ニュースレタープロバイダーによって異なります。

しかし、インラインCSSでホバー効果を得るにはどうすればよいですか？

できません ただし、JavaScriptのonMouseOverを使用して、同じホバー効果を作成できます。 およびonMouseOut メソッド。

ホバー（またはマウスオーバー）時のハイパーリンクの色を青から赤に変更するとします。

<a href="#your-url-path"
onMouseOver="this.style.color='red'"
onMouseOut="this.style.color='green'" >Click here to Subscribe</a>

結果：

購読するにはここをクリック

一般に、インラインCSSは理想的ではありませんが、物事を成し遂げるために理想的とは言えないコードを使用せざるを得ない場合があります。


  1. CSSで視差スクロール効果を作成するにはどうすればよいですか？

    CSSで視差スクロール効果を作成するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans

  2. CSSでホバー時にトランジションを追加するにはどうすればよいですか？

    CSSにホバーしてトランジションを追加するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, s