0
これはユニプロジェクトです。マウスオーバーでソングを回転させて再生する3つのCDイメージがありますが、バックグラウンドイメージも変更したいです。私はそれをすることができましたが、私がCDイメージを離れたとき、背景と曲は引き続き再生されます。マウスをナビゲーションバーに置くと、通常の背景に戻ります。私は、カーソルがCDから離れた後、背景をオリジナルに戻したいと思っています。私はこれに慣れていないので、説明が間違っていると分かります。マウスのホバーでバックグラウンドイメージを変更し、ホバーオフに戻すCSSソリューション
<head>
<title>Learning HTML</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="main.js"></script>
</head>
<body id="bg">
<div id="imagesMain">
<div class="imagesMain__item" onmouseover="PlaySound('mySound')"
onmouseout="StopSound('mySound')">
<div class="imagesMain__item__bg" style="background-image: url(images/bg1.png)"></div>
<img id="album1" src="images/album1.png" />
</div>
<div class="imagesMain__item" onmouseover="PlaySound('smallThings')"
onmouseout="StopSound('smallThings')">
<div class="imagesMain__item__bg" style="background-image: url(images/bg2.png)"></div>
<img id="album2" src="images/album2.png" />
</div>
<div class="imagesMain__item" onmouseover="PlaySound('firstDate')"
onmouseout="StopSound('firstDate')">
<div class="imagesMain__item__bg" style="background-image: url(images/bg1.png)"></div>
<img id="album3" src="images/album3.png" />
</div>
<audio id='mySound' src='sounds/blink182-%5BAudioTrimmer.com%5D.mp3'/>
<audio id='smallThings' src='sounds/blink-182%20-%20All%20The%20Small%20Things-%5BAudioTrimmer.com%5D.mp3'/>
<audio id='firstDate' src='sounds/blink-182%20-%20First%20Date-%5BAudioTrimmer.com%5D.mp3'/>
</body>
次のようにCSSは次のとおりです。
#imagesMain {
padding: 0;
margin-left: auto;
margin-right: auto;
margin-top: 300px;
text-align: center;
}
.imagesMain__item {
display: inline-block;
height: 300px;
position: relative;
width: 300px;
}
.imagesMain__item img {
cursor: pointer;
display: block;
height: 100%;
position: relative;
width: 100%;
z-index: 100;
}
.imagesMain__item__bg {
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
bottom: 0;
left: 0;
opacity: 0;
position: fixed;
transition: all ease-in-out 0.1s;
transform: scale(0);
right: 0;
top: 0;
}
.imagesMain__item:hover img {
animation-name: rotate;
animation-duration: 0.8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.imagesMain__item:hover .imagesMain__item__bg {
opacity: 1;
transform: scale(1);
}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
html {
height: 100%;
}
body {
background-image: url(images/bg.png);
background-size: cover;
background-repeat: no-repeat;
}
あなたのファイルの重要な部分を共有してください。 jsファイルmain.jsとcssファイルmain.cssが完全に欠落しています。しかし、あなたは私たちにbody-end-tagを教えてください;） –
CSSはそこにあります、jSファイルはただの曲を再生していますが、私はJSのものではなくCSSのソリューションを探しています。 –
OT：html内のjsは避けてください！ BTT：CSSファイルの：hoverセクション内に新しい画像を設定するだけです。あなたはどこで苦労していますか？ –