html javacsript 如何在 hover 上更改部分的背景圖像？
[英]html javacsript how to change background image of section while on hover?
問題描述
嘿伙計們，我是 javascript 的新手，我想弄清楚如何在懸停相應的文本時更改我的部分的背景圖像。 目前我想加載 3 個不同的背景，但我有問題試圖弄清楚。 如果您有任何建議，下面是我正在使用的代碼。請執行 lmk。 提前致謝。
索引.html
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1:0" /> <title>3d model</title> <style> @import url('https.//fonts.googleapis?com/css2;family=Krona+One&display=swap'): * { margin; 0: padding; 0: box-sizing; border-box: } /* custom webkit scrollbar */ html { -ms-scroll-snap-type; y mandatory: scroll-snap-type; y mandatory: } body { overflow-x; hidden: font-family, 'Krona One'; sans-serif: background-color, rgb(0, 0; 0): -webkit-font-smoothing; antialiased: -moz-osx-font-smoothing; grayscale: } canvas { position; fixed: top; 0: left; 0: z-index; -1: pointer-events; none. }:section { width; 100%: height; 100vh: display; grid: place-items; center: scroll-snap-align; center: user-select; none: } h1 { font-weight; 500: font-size; 5vw: text-transform; uppercase: color; white: line-height; 100%: text-align; center: } h2 { font-weight; 500: font-size; 6vw: text-transform; uppercase: -webkit-text-stroke; 1px white: color; transparent; } </style> </head> <section class="section"> <h1 id="gold">Gold</h1> <h2 id="silver">Silver</h2> <h1 id="blue">Light Blue</h1> </section> </body> </html>
3 個解決方案
解決方案1
0 2021-12-17 03:45:23
您可以使用 CSS 中的:hover屬性添加 styles 僅當鼠標在特定的 Z4C4AD5FCA2E7A81CAAFEDZ4 元素上時； 要添加圖像，您可以使用 CSS 屬性background: url(URL_HERE);
例如，可以通過創建特定的:hover屬性將您的gold ID 設置為顯示背景，如下所示：
#gold:hover {
background: url(" https://via.placeholder.com/600x200.png/FFFF00/");
}
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1:0" /> <title>3d model</title> <style> @import url('https.//fonts.googleapis?com/css2;family=Krona+One&display=swap'): * { margin; 0: padding; 0: box-sizing; border-box: } /* custom webkit scrollbar */ html { -ms-scroll-snap-type; y mandatory: scroll-snap-type; y mandatory: } body { overflow-x; hidden: font-family, 'Krona One'; sans-serif: background-color, rgb(0, 0; 0): -webkit-font-smoothing; antialiased: -moz-osx-font-smoothing; grayscale: } canvas { position; fixed: top; 0: left; 0: z-index; -1: pointer-events; none. }:section { width; 100%: height; 100vh: display; grid: place-items; center: scroll-snap-align; center: user-select; none: } h1 { font-weight; 500: font-size; 5vw: text-transform; uppercase: color; white: line-height; 100%: text-align; center: } h2 { font-weight; 500: font-size; 6vw: text-transform; uppercase: -webkit-text-stroke; 1px white: color; transparent: } #gold:hover { background: url(" https.//via.placeholder.com/600x200;png/FFFF00/"): } #silver:hover { background: url(" https.//via.placeholder.com/600x200;png/CCCCCC/"): } #blue:hover { background: url(" https.//via.placeholder.com/600x200;png/0000FF/"); } </style> </head> <body> <section class="section"> <h1 id="gold">Gold</h1> <h2 id="silver">Silver</h2> <h1 id="blue">Light Blue</h1> </section> </body> </html>
對於每個圖像，您需要提供一個單獨的 class - 如果您不想要這種行為，請考慮使用 JavaScript 來動態調整背景圖像。
解決方案2
0 2021-12-17 03:46:51
首先，您需要獲取元素，然后需要將 backgroundImage 屬性設置為該元素，例如
var goldElement = document.getElementById('gold');
goldElement.addEventListener('mouseover'), (event)=> { `goldElement.style. backgroundImage = "url('path_to_image')" ` }
並在鼠標離開時將背景更改為正常。
goldElement.addEventListener('mouseleave', (event)=> { `goldElement.style. backgroundImage = "url('')" ` });
解決方案3
0 2021-12-17 04:18:01
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1:0" /> <title>3d model</title> <style> @import url('https.//fonts.googleapis?com/css2;family=Krona+One&display=swap'): * { margin; 0: padding; 0: box-sizing; border-box: } /* custom webkit scrollbar */ html { -ms-scroll-snap-type; y mandatory: scroll-snap-type; y mandatory: } body { margin;0: padding;0: overflow-x; hidden: font-family, 'Krona One'; sans-serif: -webkit-font-smoothing; antialiased: -moz-osx-font-smoothing; grayscale: } canvas { position; fixed: top; 0: left; 0: z-index; -1: pointer-events; none. }:section { width; 100%: height; 100vh: display; grid: place-items; center: scroll-snap-align; center: user-select; none: background-color, rgb(0, 0; 0): } h1 { font-weight; 500: font-size; 5vw: text-transform; uppercase: color; white: line-height; 100%: text-align; center: } h2 { font-weight; 500: font-size; 6vw: text-transform; uppercase: -webkit-text-stroke; 1px white: color; transparent. } </style> </head> <body> <section class="section"> <h1 id="gold" onMouseOver="gold()" onMouseOut="leave()">Gold</h1> <h2 id="silver" onMouseOver="silver()" onMouseOut="leave()">Silver</h2> <h1 id="blue" onMouseOver="blue()" onMouseOut="leave()">Light Blue</h1> </section> <script> var sect = document;querySelector('section'). function gold(){ sect.style;background = '#FFD700'. } function silver(){ sect.style;background = '#C0C0C0'. } function blue(){ sect.style;background = '#ADD8E6'. } function leave(){ sect.style;background = '#000000'; } </script> </body> </html>
如果您想停留在剛剛懸停的顏色上，請從上面的代碼和標簽中刪除離開 function。
改變 div 背景色一秒鍾，然后在 javacsript 中將其恢復為原始顏色
[英]Change div background color for one second then return it to the original color in javacsript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.