問題点
cssで三角形を作成し、hoverで拡大、aタグの表示を設定したところaタグにカーソルを持っていくと拡大しなくなる
html
1<!DOCTYPE html> 2<html lang="en" dir="ltr"> 3 <head> 4 <link rel="stylesheet" href="stylesheet.css"> 5 <meta charset="utf-8"> 6 <title></title> 7 </head> 8 <body> 9 <div class="wrap"> 10 <div class="triangle"><a href="#"></a></div> 11 <div class="text"> 12 <p>top</p> 13 </div> 14 </div> 15 <map> 16 <area shape="poly" coords="" href="#" alt=""> 17 </map> 18 </body> 19</html>
css
1.wrap{ 2 position: relative; 3} 4 5.triangle{ 6 display: block; 7 border-right: 50px solid transparent; 8 border-bottom: 86.6025px solid rgb(76,175,80,0.7); 9 border-left: 50px solid transparent; 10 width: 0; 11 height: 0; 12 top: 0; 13 right: 0; 14 bottom: 0; 15 left: 0; 16 margin: auto; 17} 18 19.triangle:hover{ 20 transform: scale(1.2); 21 transition-duration: 0.3s; 22 display: block; 23} 24 25.text{ 26 position: absolute; 27 top: 0; 28 right: 0; 29 bottom: 0; 30 left: 0; 31 margin: auto; 32 text-align: center; 33 height:44%; 34 display: none; 35} 36 37.triangle:hover ~ .text{ 38display:block; 39cursor: pointer; 40}
解決方法の予想
aタグにもhoverで拡大をせっていすればいいのでは、と考えたのですがそのやり方がわかりません。
教えていただきたいこと
aタグhover時に三角形にtransform指定。
これよりいい解決方法がありましたらそちらを教えてください。
よろしくお願いします。
追記
html
1<!DOCTYPE html> 2<html lang="en" dir="ltr"> 3 <head> 4 <link rel="stylesheet" href="stylesheet.css"> 5 <meta charset="utf-8"> 6 <title></title> 7 </head> 8 <body> 9 <div class="container"> 10 <a class="triangle" href="#"></a> 11 <div class="text"> 12 top 13 </div> 14 </div> 15 </body> 16</html>
css
1/*変更点*/ 2.container{ 3 display:flex; 4 width:100%; 5 justify-content: center; 6 position: absolute; 7 top: 50%; 8 left: 50%; 9 transform: translate(-50%, -50%); 10} 11/*変更点終了*/ 12 13.triangle{ 14 display: block; 15 border-right: 50px solid transparent; 16 border-bottom: 86.6025px solid rgb(76,175,80,0.5); 17 border-left: 50px solid transparent; 18 width: 0; 19 height: 0; 20 top: 0; 21 right: 0; 22 bottom: 0; 23 left: 0; 24 margin: auto; 25} 26 27.triangle:hover{ 28 transform: scale(1.2); 29 transition-duration: 0.3s; 30 display: block; 31} 32 33.text{ 34 width:100%; 35 display: none; 36 position: absolute; 37 top: 0; 38 right: 0; 39 bottom: 0; 40 left: 0; 41 margin: auto; 42 text-align: center; 43 height:44%; 44} 45a{ 46 text-decoration: none; 47} 48.triangle:hover~.text{ 49 display: block; 50} 51
これを実行すると三角形の中の文字にカーソルを合わせたときに三角形のhover拡大が機能しなくなってしまいます。文字にカーソルを合わせた時もhover拡大をけいぞくするにはどうすればいいでしょうか・
回答1件
あなたの回答
tips
プレビュー