Изменение стиля блока с hover подсказкой JS

123

05 июля 2019, 14:10

При наведении всплывает подсказка с текстом,все отлично работает но необходимо, чтобы весь блок с картинкой позади затемнялся, при всплывании этой подсказки, как на скриншоте.

Реализовано с помощью JS, так:

$(document).ready(function() {
if($(document).width() > 992) {
    $('.one').hover(function() {
        var color = $(this).css('background-color'),
        hint = $(this).find('.morehover');
        if (($(hint).text()).trim() == "") return 0;
        $(hint).css('border-top-color', color).clearQueue().delay(450).slideDown();
    }, function() {
        var hint = $(this).find('.morehover').first();
        $(hint).clearQueue().delay(250).slideUp();
    });
}});

Разметка элемента такая:

<div class="one">
    <div class="img-logo-cat">
        <img alt="" src="/netcat_files/10/155/c03be3b7f90de4fc64548be018809953">
        <div class="link-not-link">
            test.ru
        </div>
    </div>
    <div class="image"><img alt="" src="/netcat_files/10/155/dc635fb6b1507887f611dfe89f090729"></div>
    <div class="line"></div>
    <div class="more">
        <div class="morehover" style="border-top-color: rgb(255, 255, 255); display: none;">
            Текст
            <div class="ssilka-podrob">
                <a class="ssilka-podrob-link" href="%E2%84%96">Подробнее <i class="fas fa-angle-right"></i></a>
            </div>
        </div><span></span><a class="button" href="#" target="_blank">Перейти на сайт</a>
    </div>
</div>

Answer 1

На html + css. Был создан новый div с z-index больше, чем у img. При наведении он становиться менее непрозрачным.

.one { 
  position: relative; 
  width: 200px; 
  border: 1px solid; 
  overflow: hidden; 
} 
 
.one>img { 
  position: relative; 
  width: 100%; 
  vertical-align: top; 
  z-index:1; 
} 
 
.one>.backdrop { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  top:0; 
  left:0; 
  opacity: 0; 
  transition: all .3s ease-in-out; 
  background:black; 
  z-index:2; 
} 
 
.one:hover>.backdrop { 
  opacity: .5; 
} 
 
.more { 
  position: absolute; 
  width: 100%; 
  transition: all .3s ease-in-out; 
  transform: translateY(100%); 
  background: white; 
  bottom: 0; 
  font-size:12px; 
  z-index:3; 
} 
 
.one:hover>.more { 
  transform: translateY(0%); 
} 
 
.more>* { 
  position: relative; 
  width: 100%; 
  margin: 10px 0; 
  float: left; 
  display: inline-block; 
} 
 
.ssilka-podrob { 
  text-align: right; 
} 
 
.button { 
  width: 100%; 
  padding: 10px 0; 
  background: orange; 
  color: white; 
  text-align: center; 
}

<div class="one"> 
  <img alt="" src="https://d7h8sdtmi2h3e.cloudfront.net/media/catalog/product/cache/1/image/1024x/9df78eab33525d08d6e5fb8d27136e95/E/D/EDBGB601.jpg"> 
    <div class="backdrop"></div> 
  <div class="more"> 
    <div class="morehover"> 
      Lorem ipsum dolor sit amet, verear nominati eu sed. Qui doming regione urbanitas id, accusam oporteat similique cu nam. Cu velit graeci concludaturque sed, eu fierent appetere fabellas est. 
      <div class="ssilka-podrob"> 
        <a class="ssilka-podrob-link" href="%E2%84%96">Подробнее ></a> 
      </div> 
    </div> 
    <a class="button" href="#" target="_blank">Перейти на сайт</a> 
  </div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Запись аудиофайла на javascript

Для создания приложения с использованием yandex speech kitЕго использование предполагае запись аудиофайла в формате ogg или lpcm и отправкой его на сервер

122

javascript