对于学校项目,我们需要使用html,css和PHP制作基本表格.我想在我的网站上添加一些有趣的东西,以使其看起来更令人愉快.我要添加的一件事是,将鼠标悬停在按钮上时页面的背景图像会发生变化.但是,当我尝试添加它时,它什么也没做.
换句话说,我想通过悬停在旋钮上将背景图像从“ 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.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来实现这一点有点棘手.这是使用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的元素上检测到悬停事件时,将执行第一个函数(它选择页面的主体并更改其背景图像).然后,当鼠标退出元素时,执行第二个功能(它选择页面的主体并将其背景图像更改回原始图像).
使用您的代码：
html{
font-family: 'Nunito',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://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80')");
});
</script>
</body>
</html>