Clicky

Skocz do zawartości


Zdjęcie
- - - - -

Pojawienie się elementu

3 odpowiedzi w tym temacie
CSS HTML JS

  • Zaloguj się, aby dodać odpowiedź

#1 Michał Warmuz

Michał Warmuz

    Początkujący

  • Użytkownik
  • Pip
  • 2 postów

Napisano 06 marzec 2016 - 15:09

Witajcie !

Robię projekt do szkoły to znaczy stronę internetową. Mam do was  pytanie. Jak zrobić tak aby po najechaniu na element chodzi mi o hover pojawił się inny element. Chodzi mi o to że dopiero po najechaniu ukazał się ten element.

 

http://zapodaj.net/0...75672d.jpg.html

<! DOCTYPE HTML>
<html lang="PL">
<head>
	<meta charset="UTF-8" />
	<title>Komputronik</title>
	<meta name="description" content="Strona poświęcona sklepowi internetowemu Komputronik" />
	<meta name="keywords" content="Komputronik, sprzęt, komputer, hardware, drukarki" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="stylesheet" type="text/css" href="style.css" />
	<link href='https://fonts.googleapis.com/css?family=Lato:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>

<body>
<div id="container">
	<div id="topbar">
		<span class="text1">Ogłoszenia</span>
		<span class="text1">Wydarzenia</span>
		<span id="text2">Kontakt</span>
		<div style="clear:both;"></div>
	</div>
	<div id="titlebar">
		<div id="title">
			<span id="bigtitle">Komputronik</span><br />
			<span id="littletitle">Slogan Reklamowy</span>
		</div>
		<div id="menu">
			 <a href="#"><div class="option">Start</div></a>
			<a href="#"><div class="option">O firmie</div></a>
			<a href="#"><div class="option">Usługi</div></a>
			<a href="#"><div class="option">Praca</div></a>
			<a href="#"><div style="clear:both"></div></a>
		</div>
		<div style="clear:both;"></div>
	</div>
	<div id="side"></div>
	<div id="content">
		<div class="box">
			<h2>Nagłówek h2</h2>
			<div class="pole1"><img src="pioro.png"/></div>
			<div class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet hendrerit sapien. Phasellus et urna a turpis dictum scelerisque quis eu elit. 
			
			<a href="http://interia.pl" target="_blank"><div class="as">Więcej..</div></a>
			</div>
		</div>
		
		<div class="box">
			<h2>Nagłówek h2</h2>
			<div class="pole1"><img src="pioro.png"/></div>
			<div class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet hendrerit sapien. Phasellus et urna a turpis dictum scelerisque quis eu elit.
			
			<a href="http://interia.pl" target="_blank"><div class="as">Więcej..</div></a>
			</div>
		</div>
	
		</div>
	<div id="sidebar">
		<p>Nagłówek</p><br />
		<input type="text" value="Imię:" />
		<input type="text" value="Nazwisko:"/>
		<input type="text" value="E-mail:"/>
		
		<div id="save">Zapisz Się</div>
	</div>
	<div style="clear:both;"></div>
	
	<div id="footer">
		<div class="social">
			Nagłówek1 <br />
			<img src="img2.png" />
		</div>
		<div class="social">
			Nagłówek2<br />
			<img src="img1.png" />
		</div>
		<div class="social">
			Nagłówek3<br />
			<img src="img3.png" />
		</div>
	</div>
	<div id="bottom"></div>
</div>
	<script>

			$(document).ready(function() {
			var stickyNavTop = $('#topbar').offset().top;
			var stickyNav = function(){
			var scrollTop = $(window).scrollTop();
			if (scrollTop > stickyNavTop) { 
			$('#topbar').addClass('sticky');
			} else {
			$('#topbar').removeClass('sticky');
			}
			};

			stickyNav();

			$(window).scroll(function() {
			stickyNav();
			});
			});

	</script>
</body>
</html>
body {
	background-color: gray;
	font-family: 'Lato', sans-serif;
	margin: 0 !important;
	font-size: 20px;
	color: #FFFFFF;
	font-weight: 700;
}
#topbar {
	background-color: black;
	height: 30px;
	padding: 10px;
}
.text1 {
	float: left;
	margin-right: 70px;
	margin-left: 70px;
}
#text2 {
	float: right;
	margin-right: 150px;
}
#titlebar {
	height: 150px;
	background-color: #303030;
	opacity: 0.7;
}
#title {
	float: left;
	width: 430px;
	margin-left: 70px;
	margin-top: 20px;
}
#menu {
	float: left;
	width: 500px;
}
#bigtitle {
	color: #3c70c0;
	font-size: 48px;
}
#littletitle {
	display: block;
	margin-left: 200px;
	font-size: 24px;
}
.option {
	float: left;
	font-size: 28px;
	font-weight: 700px;
	margin-top: 50px;
	margin-right: 40px;
}
#side {
	background-image: url('tlo.png');
	height: 150px;
}
#container {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
}
#content {
	width: 750px;
	height: 500px;
	margin-top: 20px;
	float: left;
}
.box {
	background-color: #3c70c0;
	width: 630px;
	height: 200px;
	margin-top: 10px;
	margin-left: 20px;
	transition-duration:2s;
}
.box:hover {
	height: 250px;
	background-color: #1a50a0;
}
#sidebar {
	background-color: #3c70c0;
	width: 210px;
	float: left;
	height: 370px;
	padding: 20px;
	margin-top: 30px;
	opacity: 0.8;
}
#footer {
	background-color: #303030;
	height: 80px;
	border: 3px solid #3c70c0;
	margin-top: 40px;
	padding: 15px;
}
.social {
	float: left;
	width: 300px;
	text-align: center;
	font-size: 24px;
}
h2 {
	margin-left: 70px;
	margin-top: 10px;
}
.lorem {
	float: left;
	text-align: justify;
	width: 400px;
}
.pole1 {
	width: 130px;
	float: left;
	margin-left: 20px;
}
#bottom {
	height: 40px;
	background-color: black;
}
p {
	text-align: center;
	font-size: 44px;
}
input[type="text"] {
    display: block;
    margin-bottom: 10px;
	height: 40px;
	border: 4px solid black;
	font-size: 14px;
	font-weight: 700;
}
#save {
	background-color: 39b54a;
	height: 30px;
	width: 90px;
	padding: 10px;
	margin-left: 120px;
	margin-top: 20px;
	cursor: pointer;
}
.as {
	background-color: 39b54a;
	height: 30px;
	width: 100px;
	padding: 5px;
	margin-left: 370px;
	cursor: pointer;
	margin-top: 3px;
	text-align: center;
	color: white;
	font-weight: 700;
	transition-duration:2s;
}
.as:hover {
	margin-top: 53px;
}
a {
	color: white;
	text-decoration: none;
}
.option:hover {
	border-bottom: 6px solid #FFFFFF;
	color: white;
}
.sticky {
	width: 100%;
	top: 0;
	left: 0;
	z-index: 100;
	position: fixed;
}


#2 mck

mck

    Jestę Blogerę

  • Admin
  • 1544 postów

Napisano 06 marzec 2016 - 15:43

.box a { opacity: 0; transition: opacity 0.4s; }
.box:hover a { opacity: 1; }


#3 Michał Warmuz

Michał Warmuz

    Początkujący

  • Użytkownik
  • Pip
  • 2 postów

Napisano 07 marzec 2016 - 14:07

.box a { opacity: 0; transition: opacity 0.4s; }
.box:hover a { opacity: 1; }

Wkleiłem to do style.css i nie działa :(



#4 mck

mck

    Jestę Blogerę

  • Admin
  • 1544 postów

Napisano 07 marzec 2016 - 14:18

Wrzuciłem to na JSBina i działa.






Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych