html javacsript 如何在 hover 上更改部分的背景图像？
[英]html javacsript how to change background image of section while on hover?
问题描述
hey guys i am new to javascript and i am trying to figure out how to change the background image of my section while hovering the respective texts.
嘿伙计们，我是 javascript 的新手，我想弄清楚如何在悬停相应的文本时更改我的部分的背景图像。 currently i want to load 3 different backgrounds but i have issues trying to figure out.目前我想加载 3 个不同的背景，但我有问题试图弄清楚。 below is the code im using.do lmk if u have any suggestions.如果您有任何建议，下面是我正在使用的代码。请执行 lmk。 thanks in advance.提前致谢。
index.html索引.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
You can use the :hover property in CSS to add styles only whenever the mouse is over the specific HTML element;您可以使用 CSS 中的:hover属性添加 styles 仅当鼠标在特定的 Z4C4AD5FCA2E7A81CAAFEDZ4 元素上时； and to add an image you can use the CSS property background: url(URL_HERE);要添加图像，您可以使用 CSS 属性background: url(URL_HERE);
For example, your gold ID can be set to display a background by creating a specific :hover property as such:例如，可以通过创建特定的: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>
For every image, you would need to provide a separate class - if you don't want this behavior, consider using JavaScript instead to dynamically adjust the background image.对于每个图像，您需要提供一个单独的 class - 如果您不想要这种行为，请考虑使用 JavaScript 来动态调整背景图像。
解决方案2
0 2021-12-17 03:46:51
First you need to get the element and then you need to set the backgroundImage property to that element like首先，您需要获取元素，然后需要将 backgroundImage 属性设置为该元素，例如
var goldElement = document.getElementById('gold');
goldElement.addEventListener('mouseover'), (event)=> { `goldElement.style. backgroundImage = "url('path_to_image')" ` }
And change the background to normal when mouse leave.并在鼠标离开时将背景更改为正常。
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>
If you want to stay on the color just hovered, then remove the leave function from the above code and from the Tags too.如果您想停留在刚刚悬停的颜色上，请从上面的代码和标签中删除离开 function。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.