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.
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.2.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.
<button type="button" class="as">Więcej..</button>
</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.
<div class="as">Więcej..</div>
</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(){
$(".box").click(function(){
$(this).stop().animate("height","100px");
$(this).stop().animate("width","100px");
});
});
</script>
</body>
</html>
CSS:
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: 400px;
margin-top: 20px;
float: left;
}
.box {
background-color: #3c70c0;
width: 630px;
height: 200px;
margin-top: 10px;
margin-left: 20px;
opacity: 0.8;
}
#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: 40px;
width: 100px;
padding: 5px;
margin-left: 370px;
cursor: pointer;
margin-top: 3px;
text-align: center;
color: white;
font-weight: 700;
}
a {
color: white;
text-decoration: none;
}
.option:hover {
border-bottom: 6px solid #FFFFFF;
color: white;
}
