Нужно что бы при наведении на элемент с классом tor
изменялось свойство стиля cap
, либо изменить класс на cap-about
.
То есть, нужно что бы при наведении на ссылку менялось изображение под меню.
Вот код:
body {
background-image: url(img/background.jpg);
margin: 0;
font-size: 18px;
}
::-webkit-scrollbar {
width: 12px;
height: 3px;
}
::-webkit-scrollbar-track {
background-color: #999;
}
::-webkit-scrollbar-track-piece {
background-color: #ffffff;
}
::-webkit-scrollbar-thumb {
height: 50px;
background-color: #666;
border-radius: 3px;
}
::-webkit-scrollbar-corner {
background-color: #999;
}
}
::-webkit-resizer {
background-color: #666;
}
.cap {
background-image: url(img/cap.jpg);
max-width: 1024px;
height: 100%;
max-height: 500px;
margin: 0 auto;
position: relative;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
margin-bottom: 90px;
}
.cap-about {
background-image: url(img/about.jpg);
max-width: 1024px;
height: 100%;
max-height: 500px;
margin: 0 auto;
position: relative;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
margin-bottom: 90px;
}
.menu {
line-height: 60px;
color: white;
width: 1024px;
background: linear-gradient(to top, #f9f9f9, #ffffff, #f9f9f9);
margin: 0 auto;
}
.button-menu {
display: inline-block;
width: 100px;
line-height: 45px;
color: #655959;
text-decoration: none;
transition: 0.3s;
border-right: 1px solid #d6d6d6;
text-align: center;
margin: 0;
}
.button-menu:hover {
transition: 0.3s;
font-size: 20px;
}
.tor:hover~.cap {
background-image: url(img/about.jpg);
}
.sitename {
text-align: right;
height: 100px;
position: absolute;
width: 100%;
margin-top: 60px;
}
.logo {
vertical-align: bottom;
margin-inline-end: 55px;
text-align: right;
}
.content {
max-width: 100%;
margin: 0 auto;
margin-top: 25px;
background-color: #fff;
}
#load {
display: none;
position: absolute;
right: 10px;
top: 10px;
background: url(images/ajax-loader.gif);
width: 43px;
height: 11px;
text-indent: -9999em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Наш семейный сайт</title>
<script>
function showContent(link) {
var cont = document.getElementById('content');
var http = createRequestObject();
if (http) {
http.open('get', link);
http.onreadystatechange = function() {
if (http.readyState == 4) {
cont.innerHTML = http.responseText;
}
}
http.send(null);
} else {
document.location = link;
}
}
// ajax объект
function createRequestObject() {
try {
return new XMLHttpRequest()
} catch (e) {
try {
return new ActiveXObject('Msxml2.XMLHTTP')
} catch (e) {
try {
return new ActiveXObject('Microsoft.XMLHTTP')
} catch (e) {
return null;
}
}
}
}
</script>
<script>
showContent('page1.html') // страница по умолчанию
</script>
<script type="text/javascript">
$(".tor").hover(
function() {
$(".cap").toggleClass("cap-about");
},
function() {
$(".cap").toggleClass("cap");
}
);
</script>
</script>
<link rel=stylesheet type="text/css" href="style/mystyles.css">
</head>
<body>
<div class="menu">
<a class="button-menu one" href="#" onClick="showContent('page/OneContent.html')">Главная</a>
<a class="button-menu tor" href="#" onClick="showContent('page/about.html')">О нас</a>
<a class="button-menu" href="news.html">Новости</a>
<a class="button-menu" href="gallery.html">Галерея</a>
</div>
<div id="content">
<div class="cap">
<div class="sitename">
<img src="style/img/logo.png" class="logo">
</div>
</div>
<div class="content">
<h2>Welcome!</h2>
<p>Hi, welcome to the demonstration for the NETTUTS tutorial - "How to Load In and Animate Content with jQuery"</p>
<p>In this tutorial we will be taking your average everyday website and enhancing it with jQuery. We will be adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page. We
will also be integrating some awesome effects...</p>
</div>
<div>
</body>
</html>