Блог

Главная - Вопросы по программированию - Наведение курсора мыши на фон раздела в соответствии с заголовком

Наведение курсора мыши на фон раздела в соответствии с заголовком

#php #html #background #background-image

#php #HTML #фон #фон-изображение

Вопрос:

Я пытался сделать фон немного более интерактивным в этом разделе, в результате чего фон раздела будет меняться соответственно названию. То, что я пытаюсь сделать в своем коде, заключалось в том, чтобы иметь контейнер, содержащий фоновое изображение, и когда я наведу курсор на другое название, оно изменится на назначенное ему фоновое изображение.

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

HTML / CSS :

 .expertise_menu {
  *background-image: url('../ga7-theme/img/expertise/Expertise_1.png');
  opacity: 1;
  z-index: 999;
}
.design-consultancy span:hover img {
  *background-image: url('../ga7-theme/img/expertise/Expertise_1.png');
  display: block;
  *opacity: 1;
  z-index: 999;
}
.expertise_menu .turnkey-project span:hover {
  background-image: url('../ga7-theme/img/expertise/Expertise_2.png');
  opacity: 1;
}
.expertise_menu .inhouse-production span:hover {
  background-image: url('../ga7-theme/img/expertise/Expertise_3.png');
  opacity: 1;
}
.expertise_menu .event-management span:hover {
  background-image: url('../ga7-theme/img/expertise/Expertise_4.png');
  opacity: 1;
}
.expertise_menu #visual-merchandising span:hover {
  background-image: url('../ga7-theme/img/expertise/Expertise_5.png');
  opacity: 1;
}  
 <section id="expertise" class="fullscreen specific-padding-4">
  <div class="content-a">
    <div class="row">
      <div class="container col-lg-4">
        <h2 style="text-align:right;">EXPERTISE</h2>
      </div>
      <!-- col-lg-12  -->
    </div>
    <!-- row  -->

    <!-- BACKGROUND -->
    <div class="fullscreen design-consultancy"></div>
    <div class="fullscreen turnkey-project"></div>
    <div class="fullscreen inhouse-production"></div>
    <div class="fullscreen event-management"></div>
    <div class="fullscreen visual-merchandising"></div>

    <div class="content-b col-lg-4 col-sm-12">
      <div class="expertise_menu">
        <span class="design-consultancy">Design Consultancy</span>
        <br>
        <span class="turnkey-project">Turn Key Project</span>
        <br>
        <span class="inhouse-production">In-House Productions</span>
        <br>
        <span class="event-management">Event Management</span>
        <br>
        <span class="visual-merchandising">Visual Merchandising</span>
        <br>
      </div>

    </div>
    <!-- col-lg-12  -->

    <div class="container-fluid col-lg-8">
      <!-- E/M/P/T/Y/ -->
    </div>
    <!-- col-lg-12  -->
  </div>
  <!-- row  -->
</section>
<!-- container  -->

Ответ №1:

Избавьтесь от всех ваших фоновых divs и сохраните один отдельный div и присвоите ему идентификатор. Я буду использовать «dynamic_background» в качестве примера.

 <div id="dynamic_background" class="fullscreen"></div>

Добавьте идентификатор в свое экспертное меню, например «expertise_items»

 <div id="expertise_items" class="expertise_menu">

Использование jQuery

 $(function() {
  $("#expertise_items span").hover(function() {
    var background = $(this).attr("class");
    $("#dynamic_background").attr("class", background);
  });
});

CSS
Обновите свой css, чтобы просто отображать фоновое изображение как часть этого класса, и убедитесь, что вы указали высоту и ширину контейнера как размер, который вы хотите, чтобы ваше изображение, или если вы хотите, чтобы оно было отзывчивым, вы также можете это сделать.

 #dynamic_background.turnkey-project {
    background-image: url('../ga7-theme/img/expertise/Expertise_1.png');
}

Вот пример скрипки для вас: https://jsfiddle.net/adrianopolis/euc7p9qg /

Комментарии:

1. Итак, мой CSS должен выглядеть примерно так:

2. Итак, мой CSS должен выглядеть примерно так?: #expertise_items .design-консультационный диапазон: наведите курсор > #dynamic_background { background-image: url(‘../ga7-theme/img/expertise/Expertise_1.png’); }

3. В основном скрипт берет ваш атрибут класса из разделов в вашем меню, которым вы назначили фоновые изображения в своей таблице стилей. Затем он принимает это имя класса и добавляет его в ваш полноэкранный фоновый контейнер.