正文 

当前位置： 首页 > 问答 >

使用css将鼠标悬停在按钮上时如何更改站点背景图像？

     2023-05-08     126

关键词：

【中文标题】使用css将鼠标悬停在按钮上时如何更改站点背景图像？【英文标题】：How can I change a sites background image when hovering over a button using css? 【发布时间】：2019-08-24 05:26:12 【问题描述】：

对于一个学校项目，我们需要使用 html、css 和 php 制作一个基本表单。我想在我的网站上添加一些有趣的东西，让它看起来更愉快。我要添加的一件事是页面的背景图像在悬停在按钮上时会发生变化。但是当我尝试添加它时，它根本什么都不做。 换句话说，我想通过将鼠标悬停在 knop 上将背景图像从“lamps.jpg”更改为“lamps1.jpg”。

请注意，我在 css 方面没有太多经验，所以我可能只是犯了一些愚蠢的错误。

我确实有一些其他悬停代码用于按钮执行它应该执行的操作。

自从我观看过大量使用文章的视频以来，我一直尝试将其放入文章中。并且还使用 :before 参数。两者都无济于事。

html
    font-family: 'Nunito', sans-serif;

body
    background-size: cover;
    color: white;
    letter-spacing: 0.5x;
    background-image: url("https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");

input
   margin-left: 10%;

.text
    padding: 5px 15px;
    min-width: 200px;
    letter-spacing: 0.3px;

.knop
    padding: 8px 28px;
    border: #dcbc71 2px solid;
    background-color: transparent;
    color: #fff;
    -webkit-transition: border-radius 0.6s;

.knop:hover
    transition: 0.6s;
    border-radius: 10px;
    color: rgba(0, 0, 0, 0.5);
    background-color: #fcdd96;

fieldset
    border-radius: 25px;
    border: #dcbc71 2px solid;
    min-height: 600px;

<!DOCTYPE html> 
<html lang="nl"> 
	<head>
		<title>Enquete</title>
		<meta charset="utf-8"> 
		<link rel="stylesheet" href="enq.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script>
			$(".knop").hover(function()
  			$("body").css("background-image", "url('https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA4OC85MTEvb3JpZ2luYWwvZ29sZGVuLXJldHJpZXZlci1wdXBweS5qcGVn')");
  			, function()
  			$("body").css("background-image", "url('https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80')");
			);
		</script>
		<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
	</head>
	<body>
		<fieldset>
				<legend><h3>Vrijetijdsbesteding</h3></legend>
				<form name="form" method="post" action ="verstuur.php"> 
				<p> Welkom bij deze enquete over vrijetijdsbesteding. Vul het aub eerlijk in zodat wij de best mogelijke resultaten krijgen.
					<table>
					<tr><td>Stad*:</td><td><input type = "text"  name = "stad" placeholder="Stad" class="text" required></td></tr>					
					<tr><td>Leeftijd*:</td><td> <input list="leeftijden" name= "leeftijd" placeholder="Kies een leeftijd" class="text" required>
								<datalist id="leeftijden">
								<option value="0-13">
								<option value="13-18">
								<option value="19-25">
								<option value="26-35">
								<option value="36-45">
								<option value="46-55">
								<option value="56-65">
								<option value="65+">
								</datalist></td></tr>
					<tr><td>Hoeveel uur heb je gemiddeld in de week aan vrije tijd?</td>
								<td><input list="uren" name="uren" placeholder="Kies een uurschatting" class="text" required>
								<datalist id="uren">
								<option value="Geen">
								<option value="1-5">
								<option value="6-10">
								<option value="11-15">
								<option value="16-20">
								<option value="21-25">
								<option value="26-30">
								<option value="30+">
								</datalist></td></tr>
					<tr><td style="vertical-align: top;">Wat doe je in jouw vrije tijd?</td>
							<ul>
							<td><li style="list-style-type: none;"><input type="radio" name= "besteding" value="vrienden" required> Chillen met vrienden</li>
								<li style="list-style-type: none;"><input type="radio" name= "besteding" value="tv"> TV kijken</li>
								<li style="list-style-type: none;"><input type="radio" name= "besteding" value="sport"> Sporten</li>
								<li style="list-style-type: none;"><input type="radio" name= "besteding" value="gamen"> Gamen</li>
								<li style="list-style-type: none;"><input type="radio" name= "besteding" value="lieverniet"> Vertel ik liever niet</li>
								<li style="list-style-type: none;"><input type="radio" name= "besteding" value="Anders" > Anders</li></ul></td></tr>
					<tr><td>Hoeveel uur zit je op je telefoon op een dag?</td>
								<td><input type = "text" size= "25" name = "teltijd" placeholder="Vul een uurschatting in" class="text" required></td></tr>
					<tr><td><p><input type = "submit" name='verstuurd' value = "Verstuur" class="knop"></p> </td></tr>
				</fieldset>
		</form>
		</table>
	</body>
</html>

我希望将鼠标悬停在按钮上以更改背景，但它并没有做任何不同的事情。

【问题讨论】：

您不能在 CSS 中“向上”移动 DOM，因此子按钮不会影响父元素 HTML。你可以使用 JS 来实现。 ***.com/questions/1014861/… 【参考方案1】：

嗨，Darren，欢迎来到 Stack Overflow！

您在这里遇到的问题是 CSS 无法向上选择。即不能选择给定选择器的父级。因此，当您将鼠标悬停在按钮上时，无法将样式应用于正文。

.background-changer:hover > div 
 position: absolute;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 z-index: -1;
 background: #fcc;
 pointer-events: none;

<h1>
  Hello World!
</h1>

<button class="background-changer">
  Hover me!
  <div></div>
</button>

这是通过将子元素从其父元素中转义并将其分布在整个页面上来实现的。 pointer-events: none 消除了一些错误的副作用，但它可能不是最稳定的解决方案。

让我们别无选择，只能选择 JavaScript。

【讨论】：

【参考方案2】：

使用纯 CSS 实现这一点有点 hacky。以下是使用 jQuery 实现此功能的方法：

$(".toggleBgBtn").hover(function()
  $("body").css("background-image", "url('https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA4OC85MTEvb3JpZ2luYWwvZ29sZGVuLXJldHJpZXZlci1wdXBweS5qcGVn')");
  , function()
  $("body").css("background-image", "url('https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80')");
);
body 
  background-image: url("https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
  background-size: cover;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <input class="toggleBgBtn" type="button" value="Hover to change background image">
</body>

这里发生的情况是，当在 toggleBgBtn 类的元素上检测到 hover 事件时，执行第一个函数（它选择页面主体并更改其背景图像）。然后，当鼠标退出元素时，执行第二个函数（它选择页面的主体并将其背景图像更改回原始图像）。

使用您的代码：

html
    font-family: 'Nunito', sans-serif;

body
    background-size: cover;
    color: white;
    letter-spacing: 0.5x;
    background-image: url("https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");

input
   margin-left: 10%;

.text
    padding: 5px 15px;
    min-width: 200px;
    letter-spacing: 0.3px;

.knop
    padding: 8px 28px;
    border: #dcbc71 2px solid;
    background-color: transparent;
    color: #fff;
    -webkit-transition: border-radius 0.6s;

.knop:hover
    transition: 0.6s;
    border-radius: 10px;
    color: rgba(0, 0, 0, 0.5);
    background-color: #fcdd96;

<!DOCTYPE html> 
<html lang="nl"> 
	<head>
		<title>Enquete</title>
		<meta charset="utf-8"> 
		<link rel="stylesheet" href="enq.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		
		<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
	</head>
	<body>
		<fieldset>
				<legend><h3>Vrijetijdsbesteding</h3></legend>
				<form name="form" method="post" action ="verstuur.php"> 
				<p> Welkom bij deze enquete over vrijetijdsbesteding. Vul het aub eerlijk in zodat wij de best mogelijke resultaten krijgen.
					<table>
					<tr><td><p><input type = "submit" name='verstuurd' value = "Verstuur" class="knop"></p> </td></tr>
				</table>
		</form>
    </fieldset>
    <script>
			$(".knop").hover(function()
  			$("body").css("background-image", "url('https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA4OC85MTEvb3JpZ2luYWwvZ29sZGVuLXJldHJpZXZlci1wdXBweS5qcGVn')");
  			, function()
  			$("body").css("background-image", "url('https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80')");
			);
		</script>
	</body>
</html>

【讨论】：

如何将它添加到我的代码中？我已经尝试过我自己的课程，然后是你的课程，但什么也没发生。我的猜测是我错误地实现了 jQuery。标题看起来像this @Darren 请在您的帖子中包含您的 HTML 代码，我将使用有效的 sn-p 为您的代码编辑我的答案。 我已经添加了我的 html 代码。我想要工作的按钮叫做 knop @Darren 您的代码实际上很好。您只需将我的 jQuery &lt;script&gt;&lt;/script&gt; 移动到 HTML 页面的底部，在 &lt;/body&gt; 标记之前。 @Darren 在我的回答中添加了一个有效的 sn-p。我刚刚删除了表格中不相关的部分。

将鼠标悬停在 li 上时更改图像并使用 CSS 永久保存该图像

】将鼠标悬停在li上时更改图像并使用CSS永久保存该图像【英文标题】：ChangeimagewhenhoveringoverliandkeepthatimagepermanentusingCSS【发布时间】：2016-09-2210:05:42【问题描述】：对于我的生活，我无法弄清楚。本质上，有一个在页面访问时... 查看详情

CSS样式：悬停时如何更改图像？

...果，当它悬停在图像上时，它将变为另一张图片。当我不使用锚标签时，我似乎无法让它工作。我的目标是当我将鼠标悬停在按钮上时改变图片，我相信这需要一些jQuery魔法。这是我的代码，用于在悬停时尝试更改图像但 查看详情

悬停在列表项上时更改背景图像

...在这个列表的div有一个背景图像。我想要做的是每当我将鼠标。请注意，每个项目都应将背景更改为不同的图像。我该怎么做呢？我只找到了如何更改为单个而不是多个图像的答案。这是屏幕截图。我已经将鼠标悬停 查看详情

将鼠标悬停在按钮上时如何更改 div 的文本？

...06【问题描述】：我有什么：连续8个编号的框。我不允许使用jQuery。我想做的事：当用户将鼠标悬停在编号框上时，div元素内的文本会根据悬停在哪个框上而动态变化。示例：如果用户将鼠标悬停在框1上，则div元素内的文本会... 查看详情

将鼠标悬停在图像上时如何更改 SVG 的颜色？

】将鼠标悬停在图像上时如何更改SVG的颜色？【英文标题】：HowtochangethecoloroftheSVGwhenhoveringovertheimage?【发布时间】：2021-12-1807:48:27【问题描述】：我有一张图片（带有链接）和中间的YouTube徽标。当我将图片悬停时，我希望YouTube... 查看详情

将鼠标悬停在按钮上时文本颜色更改

】将鼠标悬停在按钮上时文本颜色更改【英文标题】：Textcolorchangeonhoveroverbutton【发布时间】：2012-08-2119:08:12【问题描述】：我正在尝试更改悬停按钮内文本的颜色。我可以让按钮本身改变颜色，但我希望按钮文本也改变颜色。... 查看详情

将鼠标悬停在列表上时如何更改锚点颜色

】将鼠标悬停在列表上时如何更改锚点颜色【英文标题】：Howtochangeanchorcolorwhenyouhoveroveralist【发布时间】：2011-05-2011:43:39【问题描述】：我有以下HTML和CSS。当我将鼠标悬停在列表上时，我想更改背景颜色和字体颜色。但是，当... 查看详情

将鼠标悬停在一张图片上时，更改另外 2 张图片

...题描述】：我有一个形状笨拙的导航栏，事实证明它很难使用鼠标悬停效果。基本上，当我将鼠标悬停在一个按钮上时，我希望两边的2个图像以及鼠标悬停的图像发生变化。这可能吗？我的导航栏代码：<divalign="left"id="navbar 查看详情

将鼠标悬停在按钮上时仅更改部分文本

】将鼠标悬停在按钮上时仅更改部分文本【英文标题】：onlypartialtextchangeonhoveroverbutton【发布时间】：2013-09-1811:06:24【问题描述】：当鼠标悬停在按钮上时，我希望按钮中文本的字体颜色变为白色且不带下划线。目前，文本颜色... 查看详情

悬停在链接上时如何反转整个页面的颜色

...暗模式预览。我知道css过滤器：invert(100%);但不确定如何使用CSS使整个页面基于一次悬停反转。感谢您的 查看详情

将鼠标悬停在 img 上时，所有其他图像都使用 CSS 模糊：not(:hover)

】将鼠标悬停在img上时，所有其他图像都使用CSS模糊：not(:hover)【英文标题】：Whenhoveroverimg,allotherimagesblurusingCSS:not(:hover)【发布时间】：2021-02-2116:15:13【问题描述】：我正在尝试研究如何在一个图像被悬停时对所有其他图像应用... 查看详情

将鼠标悬停在 li 上时如何更改所有字体颜色

】将鼠标悬停在li上时如何更改所有字体颜色【英文标题】：Howtochangeallfontcolorwhenhoveringoveranli【发布时间】：2014-01-0708:00:12【问题描述】：我试图做到这一点，当我将鼠标悬停在一个列表元素（它是一个矩形）上时，里面的所有... 查看详情

将鼠标悬停在容器上时的 CSS 变换图像

...【发布时间】：2011-09-3002:19:44【问题描述】：有没有办法使用CSS制作容器，例如：#p-container.p-categories-item影响该div中的图像？我在图像上有一个CSS动画，但我希望它在我将鼠标悬停在整个元素上时播放，而不仅仅是实际图像本身... 查看详情

当您使用 javascript 或 jquery 将鼠标悬停时，如何使图像或按钮发光？

】当您使用javascript或jquery将鼠标悬停时，如何使图像或按钮发光？【英文标题】：Howdoyoumakeanimageorbuttonglowwhenyoumouseoverusingjavascriptorjquery?【发布时间】：2011-09-0804:50:10【问题描述】：我想在鼠标悬停在按钮或图像上时添加发光效... 查看详情

将鼠标悬停在图像上以显示按钮，并且在悬停在实际按钮上时不触发

】将鼠标悬停在图像上以显示按钮，并且在悬停在实际按钮上时不触发【英文标题】：Hoveroverimagetoshowbuttonsanddon\'ttriggerwhenhoveringoveractualbuttons【发布时间】：2011-04-2604:33:55【问题描述】：我试图让按钮在悬停在图像上时出现。以... 查看详情

使用 css 将鼠标悬停在第一个子元素上时更改其他子元素

】使用css将鼠标悬停在第一个子元素上时更改其他子元素【英文标题】：Changingotherchildelementswhenhoveringoverfirstchildusingcss【发布时间】：2013-02-0502:18:06【问题描述】：我试图在div的第一个孩子上使用悬停来影响第三个孩子。有谁知... 查看详情

将鼠标悬停在 Chrome 上时 CSS 图像会移动 [关闭]

】将鼠标悬停在Chrome上时CSS图像会移动[关闭]【英文标题】：CSSimagesmovewhenhoveringoveronChrome[closed]【发布时间】：2013-11-1400:51:56【问题描述】：当我将鼠标悬停在我的任何图像上时，它会稍微向右移动。这只发生在Chrome上。所有其... 查看详情

将鼠标悬停在链接 Vanilla JS 上时更改 div 的背景

】将鼠标悬停在链接VanillaJS上时更改div的背景【英文标题】：ChangingbackgroundofadivwhenhoveredoveralinkVanillaJS【发布时间】：2020-08-0702:42:57【问题描述】：当我将鼠标悬停在页面上的链接上时，我希望更改一类名为“grid-light”的div的背... 查看详情