Как изменить фоновое изображение сайта при наведении курсора на кнопку с помощью css? - PullRequest
Новая
       50

Как изменить фоновое изображение сайта при наведении курсора на кнопку с помощью css?

3 голосов
/ 02 апреля 2019

Для школьного проекта нам нужно создать базовую форму, используя html, css и php. Я хочу добавить на свой сайт несколько забавных вещей, чтобы было удобнее видеть. Одна из вещей, которую я хочу добавить, заключается в том, что фоновое изображение страницы изменяется при наведении курсора на кнопку. Но когда я пытаюсь добавить, что это просто ничего не делает. Другими словами, я бы хотел изменить фоновое изображение с «lamps.jpg» на «lamp1.jpg», наведя курсор на кнопку.

Полезно отметить, что у меня совсем нет опыта работы с css, поэтому вполне возможно, что я просто совершаю какую-то глупую ошибку.

У меня есть другой код для наведения кнопки, который делает то, что должен.

Я пытался поместить это в статью, так как множество видео, которые я смотрел, использовали статьи. А также используя: перед аргументами. Оба безрезультатно. 

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>

Я ожидал, что при наведении курсора на кнопку изменится фон, но ничего не изменилось.

Ответы [ 2 ]

2 голосов
/ 02 апреля 2019

Привет, Даррен, и добро пожаловать в переполнение стека!

Проблема, с которой вы здесь сталкиваетесь, заключается в том, что 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.

0 голосов
/ 02 апреля 2019

Реализация этого с чистым 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>

Что здесь происходит, когда при обнаружении события hover в элементе класса toggleBgBtn выполняется первая функция (она выбирает тело страницы и меняет свое фоновое изображение). Затем, когда мышь выходит из элемента, выполняется вторая функция (она выбирает тело страницы и меняет свое фоновое изображение на исходное).

С вашим кодом: 

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>
...