マウスオーバーの設定(応用)

解決済

質問者：とても眠い
質問日時：2021/02/22 21:49
回答数：1件

高校生です。学校の課題でウェブサイトの作成をしているのですが、
https://kaela-web.com/
この木村カエラさんのウェブサイトのようにAの画像をマウスオーバーすると、Bの画像がCの画像に変わるようにしたいです。自分で調べたりしたのですが見つかりません。どのようなコードを打ち込めばよいでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2021/02/23 00:04

こんばんは

仕組みはそのサイトのソースを見るとわかると思いますが、外側の図形はhover時のtransitionで拡大表示しているようです。
中央の髪の色は、スクリプトでクラスを変えることで変更しているようです。
見本がそこにある場合は、ソースをじっくりと見てみましょう。

ここの掲示板では画像を使うのが面倒なので、要素の背景色だけで似たものを作ってみました。
（もちろん、各種動作をスクリプトで実現することも可能です）
考え方の一例ですが、多少のご参考にでもなれば。

・背景色なのでHTMLの構成は単純化してあります。
・周囲の〇の拡大方向の制御は省略しているので、若干、方向に偏りがあります。
　（〇の中央位置を固定するようにしておけば、偏りはなくなるはずです）
・中央の画像も、単なる要素の形と背景色で代用していますが、背景色を変えるだけなので、スクリプトは用いず、CSSのみで変更しています。
・ご提示のサイトとは、多少、仕組みは変わっています。
・背景色を背景画像に変えれば、同じ仕組みでも画像の変更を実現できるでしょう。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style>
#hoge { position:relative; margin:50px; }
#hoge a {
position:absolute; top:0; left:0;
width:100px; height:100px;
border-radius:50px;
transition: all 0.3s;
}
#hoge a:hover {
width:150px; height:150px;
border-radius:75px;
}
#fuga {
width: 200px; height:125px;
border-radius:100px 100px 0 0;
background-color:chocolate;
transform: translate(200px, 200px);
}
#fuga + div {
width:150px; height:150px;
border:2px solid gray;
border-radius:30px 30px 100px 100px;
background-color:white;
transform: translate(225px, 140px);
}

.tomato{ transform: translate(0px, 200px); background-color:tomato; }
.orange{ transform: translate(80px, 50px); background-color:orange; }
.khaki{ transform: translate(250px, 0px); background-color:khaki; }
.darkkhaki{ transform: translate(420px, 50px); background-color:darkkhaki; }
.turquoise{ transform: translate(500px, 200px); background-color:turquoise; }

.tomato:hover~#fuga{ background-color:tomato; }
.orange:hover~#fuga{ background-color:orange; }
.khaki:hover~#fuga{ background-color:khaki; }
.darkkhaki:hover~#fuga{ background-color:darkkhaki; }
.turquoise:hover~#fuga{ background-color:turquoise; }
</style>
</head>
<body>
<div id="hoge">
<a href="#" class="tomato"></a>
<a href="#" class="orange"></a>
<a href="#" class="khaki"></a>
<a href="#" class="darkkhaki"></a>
<a href="#" class="turquoise"></a>

<div id="fuga"></div>
<div></div>
</div>
</body>
</html>