Q&A
###前提・実現したいこと
section要素で括った中身をアンカーリンク領域にしております。
section要素内にマウスポインターがはいった瞬間にa:hoverが発動して文字が薄いカラーに変化します。
これと同時に画像も041.jpgから041-o.jpg(透過した画像)に変化させたいのです。
現在、img要素内にポインターが入ったとき画像がきりかわるようにJS（jQuery）の設定をしました。
このＪＳのソースを少し変えて、("section a")にhoverしたときにその中の画像が041.jpgから041-o.jpgに切り替わるようにしたいです。もちろんhoverでない状態は元の状態に戻ります。
どなたかご教示いただけましたら幸いでございます。
###該当のソースコード
html
1<div class="country"> 2 <section><a href="#"> 3 <div class="card"> 4 <h3>第一章</h3> 5 <img src="images/41.jpg" class="over"> 6 <p>おはようおはようおはようおはようおはようおはようおはよう<br> 7 おはようおはようおはようおはようおはようおはようおはようおはよう<br> 8 おはようおはようおはようおはよう</p> 9 </div> 10 </a></section> 11 12 <section><a href="#"> 13 <div class="card"> 14 <h3>第二章</h3> 15 <img src="images/42.jpg" class="over"> 16 <p>こんにちわこんにちわこんにちわこんにちわこんにちわこんにちわ<br> 17 こんにちわこんにちわこんにちわこんにちわこんにちわ<br> 18 こんにちわこんにちわこんにちわ</p> 19 </div> 20 </a></section> 21 22 <section><a href="#"> 23 <div class="card"> 24 <h3>第三章</h3> 25 <img src="images/43.jpg" class="over"> 26 <p>こんばんわこんばんわこんばんわこんばんわこんばんわこんばんわこんばんわこんばんわ<br> 27 こんばんわこんばんわこんばんわこんばんわこんばんわ<br> 28 こんばんわこんばんわこんばんわこんばんわ</p> 29 </div> 30 </a></section> 31 32</div>
CSS
1 2section{ 3 background:#AAA; 4 margin-bottom:30px; 5 width:500px; 6} 7section card{ 8 padding:40px; 9} 10 11section a:hover{ 12 color:#ccc; 13} 14
javascript
1$(function(){ 2 //ロールオーバー 3 $("img.over").mouseover(function(){ 4 $(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1-o$2")); 5 }).mouseout(function(){ 6 $(this).attr("src",$(this).attr("src").replace(/^(.+)-o(\.[a-z]+)$/, "$1$2")); 7 }).each(function(){ 8 $("<img>").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1-o$2")); 9 }); 10});
回答1件
0
ベストアンサー
以下のようにしてはいかがでしょうか？
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 section { 8 background: #AAA; 9 margin-bottom: 30px; 10 width: 500px; 11 } 12 13 section card { 14 padding: 40px; 15 } 16 17 section a:hover { 18 color: #ccc; 19 } 20 </style> 21</head> 22<body> 23<div class="country"> 24 <section><a href="#"> 25 <div class="card"> 26 <h3>第一章</h3> 27 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=images/41.jpg" class="over"> 28 <p>おはようおはようおはようおはようおはようおはようおはよう<br> 29 おはようおはようおはようおはようおはようおはようおはようおはよう<br> 30 おはようおはようおはようおはよう</p> 31 </div> 32 </a></section> 33 34 <section><a href="#"> 35 <div class="card"> 36 <h3>第二章</h3> 37 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=images/42.jpg" class="over"> 38 <p>こんにちわこんにちわこんにちわこんにちわこんにちわこんにちわ<br> 39 こんにちわこんにちわこんにちわこんにちわこんにちわ<br> 40 こんにちわこんにちわこんにちわ</p> 41 </div> 42 </a></section> 43 44 <section> 45 <a href="#"> 46 <div class="card"> 47 <h3>第三章</h3> 48 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=images/43.jpg" class="over"> 49 <p>こんばんわこんばんわこんばんわこんばんわこんばんわこんばんわこんばんわこんばんわ<br> 50 こんばんわこんばんわこんばんわこんばんわこんばんわ<br> 51 こんばんわこんばんわこんばんわこんばんわ</p> 52 </div> 53 </a> 54 </section> 55 56</div> 57<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 58<script> 59 $(function () { 60 //ロールオーバー 61 $("img.over").mouseover(function () { 62 $(this).attr("src", $(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1-o$2")); 63 }).mouseout(function () { 64 $(this).attr("src", $(this).attr("src").replace(/^(.+)-o(\.[a-z]+)$/, "$1$2")); 65 }).each(function () { 66 $("<img>").attr("src", $(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1-o$2")); 67 }); 68 69 //追加 70 $("section a").mouseover(function () { 71 $(this).find("img.over").attr("src", $(this).find("img.over").attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1-o$2")) 72 }).mouseout(function () { 73 $(this).find("img.over").attr("src", $(this).find("img.over").attr("src").replace(/^(.+)-o(\.[a-z]+)$/, "$1$2")); 74 }).each(function () { 75 $("<img>").attr("src", $(this).find("img.over").attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1-o$2")); 76 }); 77 }); 78</script> 79</body> 80</html>
投稿2017/06/10 10:57
総合スコア14731
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/10 13:55