Zmiana zawartości po najechaniu na element

18 Września 2017

Witam. Szukam bibliotek do jQuery, które pozwolą mi zrobić: wysuwanie elementu po załadowaniu strony, zmiana zawartości jednego elementu po najechaniu na inny.

Wygląda to tak jak na tej stronie http://dettaglio.co.uk/, po wejściu w zakładkę events wysuwa nam się element1, a po najechaniu na element2, 3itp zmienia się zawartość elementu 1.

Damian_RastMan · 18 Września 2017

CSS+JQuery

Wysuwany element strony:

<!doctype html>
<html>
<head>
	<meta charset="utf=8" />
	<title>test</title>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<style>
		#test {
			width: 0px;
			height: 200px;
			background-color: rgba(0,0,0,0.5); 
		}
		#test p {
			opacity: 0;
		}
	</style>
	<script>
		$(document).ready(function(){
			$('#test').animate({
				width: 500
			  }, 1000, function() {
				$('#test p').animate({
					opacity: 1
				}, 500);
			});
		});
	</script>
</head>
<body>
	<div id="test">
	  <p>lorem ipsum dolor sit amet....</p>
	</div>
</body>

Dałoby się zrobić samym cssem ale nie chciało mi się przypominać tych funckji css'a3

Do drugiego można ajax, ale możesz po prostu zrobić tak:

<!doctype html>
<html>
<head>
	<meta charset="utf=8" />
	<title>test</title>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<style>
		#test {
			background-color: rgba(0,0,0,0.5);
			padding: 20px;
		}
		.x {
			padding: 2px; background-color: pink; cursor: pointer; display: inline-block;
		}
	</style>
	<script>
		$(document).ready(function(){
			var tempContent = $('#test').html();
			$('.x').mouseenter(function() {
				$('#test').html($(this).attr('data-content'));
			}).mouseleave(function() {
				$('#test').html(tempContent);
			});
		});
	</script>
</head>
<body>
	<div id="test">
		Domyślna treść
	</div>
	<br /><br />
	<div class="x" data-content="Treść 1">Element1</div>
	<div class="x" data-content="Treść 2">dwa</div>
	<div class="x" data-content="Treść 3">trzy</div>
	<div class="x" data-content="Treść 4">itp</div>
</body>

18 Września 2017

Dziękuje ślicznie

Zaloguj się

👋 Witaj na MPCForum!

Zmiana zawartości po najechaniu na element

Pytanie

Gość Ramzes.

Gość Ramzes.

2 odpowiedzi na to pytanie

Rekomendowane odpowiedzi

Damian_RastMan

Damian_RastMan

Gość Ramzes.

Gość Ramzes.

Zarchiwizowany