Arkadaşlar tek istediğim öğrenmek, ben diyorum ki .bir classına tıklanıldığında background değişsin şöyle yapıyorum;
.bir:hover body {
background:url("yeniresim.jpg") !important;
}
ama çalışmıyor, jquery de oluyor ama ben css de yapmak istiyorum, nasıl becerebilirim ?
Kodlarım
<!DOCTYPE HTML>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
<style type="text/css">
body {
background:url("img/1.jpg");
-webkit-background-size:cover;
}
.slide {position:absolute;bottom:50px;width:100%;min-height:200px;background:rgba(255,255,255,0.6);line-height:200px;}
.slide a img {border:none;width:200px;height:150px;margin:0 5px;-webkit-transition:border 0.5s;border:5px solid rgba(255,255,255,0);}
.slide a img:hover {border:5px solid #fff;}
.iki:hover body {
background:url("img/2.jpg") !important;
}
</style>
</head>
<body>
<div class="slide">
<a href="#" class="bir"><img src="img/1.jpg" alt="1" /></a>
<a href="#" class="iki"><img src="img/2.jpg" alt="2" /></a>
<a href="#" class="uc"><img src="img/3.jpg" alt="3" /></a>
<a href="#" class="dort"><img src="img/4.jpg" alt="4" /></a>
<a href="#" class="bes"><img src="img/5.jpg" alt="5" /></a>
</div>
</body>
</html>