我想在“歐元”按鈕懸停時更改背景影像，任何幫助將不勝感激
相關代碼（失敗）：
#body:hover > #euro{
background: url(https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2V1cm9zLmpwZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6ODI4fX19);
}<body id="body">
<div id="container">
<h3>Calculator</h3>
Dollars:<br>
<input type="number" id="num1"><br> Forgein Currency:<br>
<input type="number" id="ans" readonly><br>
<br><br>
<button id="euro">￡</button>
<button id="yen">￥</button>
<button id="rupee">?</button>
<button id="mexpes">MX$</button>
<button id="clear">C</button>
</div>
<script src="script.js"></script>
</body>任何幫助將不勝感激！
uj5u.com熱心網友回復：
使用 javascript
euro.onmouseover = () => {
document.body.style.background = 'url(https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2V1cm9zLmpwZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6ODI4fX19)';
}
euro.onmouseleave = () => {
document.body.style.background = 'white';
}
uj5u.com熱心網友回復：
純 HTML CSS 實作
#euro:hover~#bg {
background-image: url("https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2V1cm9zLmpwZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6ODI4fX19");
}
#bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
widht: 100%;
height: 100%;
z-index: -1;
}<body>
<div id="container">
<h3>Calculator</h3>
Dollars:<br>
<input type="number" id="num1"><br> Foreign Currency:<br>
<input type="number" id="ans" readonly><br>
<br><br>
<button id="euro">￡</button>
<button id="yen">￥</button>
<button id="rupee">?</button>
<button id="mexpes">MX$</button>
<button id="clear">C</button>
<div id="bg">
</div>
</div>
<script src="script.js"></script>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/476180.html
下一篇：如何洗掉導航欄上的右邊距？