Как при наведении на элемент изменить стиль другого(внешнего) элемента

Question

Нужно что бы при наведении на элемент с классом 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>

Answer 1

Ваш семейный сайт не будет работать, пока Вы не перенесете вызовы скриптов туда, где уже существуют элементы, которыми эти скрипты манипулируют.

$(document).ready(function() {
  showContent('page1.html');

  $(".tor").hover(
    ...
  );
});

Если у Вас на странице уже есть jQuery, используйте $.ajax без всяких createRequestObject.

Вопрос: Что будет делать селектор $(".cap") после того, как выполнится строчка $(".cap").toggleClass("cap");?

Ответ: Он будет возвращать пустой объект-обертку jQuery без никаких DOM-элементов внутри.

$(".tor").hover(
  function() {
    $(".cap").addClass("cap-about");
  },
  function() {
    $(".cap").removeClass("cap-about");
  }
);

БЛОГ НА HUSL

Как при наведении на элемент изменить стиль другого(внешнего) элемента

Ответы (1 шт):