Наведение курсора мыши на поле

ProgramBox

Наведение курсора мыши на поле

Post author:admin
Запись опубликована:5 ноября, 2022
Post category:Вопросы по программированию

#javascript #html #css #reactjs

#javascript #HTML #css #reactjs

Вопрос:

HTML выглядит следующим образом (я использую React BTW) :

 .iss {
  width: 100%;
  z-index: -1;
  position: absolute;
  left: 0;
  transition: all 0.5s ease-in-out;
}

.heading-section {
  margin-top: 250px;
  pointer-events: none;
}

.dgs-heading {
  color: white;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: auto;
}

.dgs-para {
  color: white;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.iss:hover {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

 <div class="dragon-sim">
  <img class="iss" src="https://spacecraftearth.com/wp-content/uploads/2017/06/ISS-Earth-Mediterranean-2.jpg" alt="iss-img" />
  <div class="heading-section">
    <h1 class="dgs-heading">SpaceX Dragon 2 Simulator</h1>
    <p class="dgs-para">Dock the SpaceX Dragon 2 Satellite to the International Space Station in this realtime simulator with the controls our astronauts use on their missions.</p>
    <Button variant='outlined' class="dgs-btn"><a
      href="https://iss-sim.spacex.com/">Try Now</a></Button>
  </div>
</div>

Развернуть фрагмент

Что я хочу, так это чтобы раздел заголовка был центрирован по изображению. Изображение имеет z — index = -1.

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

Ответ №1:

Возможно, это то, к чему вы стремитесь. Удалите pointer-events: none; и измените position: absolute; изображение на .heading-section изображение вместо изображения. А также добавьте этот код:

 .dragon-sim {
  position: relative;
  text-align: center;
}

Вот рабочий пример (я изменил className class только для запуска этого примера, просто измените его обратно на react)

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

 .dragon-sim:hover .iss {
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

Пример здесь:

 .iss {
    width: 100%;
    z-index: -1;
    transition: all 0.5s ease-in-out;
}


.dragon-sim {
  position: relative;
  text-align: center;
}

.heading-section {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.dgs-heading {
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: auto;
}

.dgs-para {
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}


.dragon-sim:hover .iss {
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

 <div class="dragon-sim">
  <img class="iss"
       src="https://spacecraftearth.com/wp-content/uploads/2017/06/ISS-Earth-Mediterranean-2.jpg"
       alt="iss-img"/>
  <div class="heading-section">
    <h1 class="dgs-heading">SpaceX Dragon 2 Simulator</h1>
    <p class="dgs-para">Dock the SpaceX Dragon 2 Satellite to the
      International Space Station in this realtime simulator with the controls
      our astronauts use on their missions.</p>
    <Button variant='outlined' class="dgs-btn"><a
      href="https://iss-sim.spacex.com/">Try Now</a></Button>
  </div>
</div>

Развернуть фрагмент

1. Это центрирует заголовок, но как только вы наводите на него курсор, размытие на заднем плане исчезает, на самом деле это не указано в вопросе, но я думаю, что этого не должно произойти

2. Это очень легко исправить. Просто добавьте это в код CSS: .dragon-sim:hover .iss { -webkit-filter: blur(5px); filter: blur(5px); } я обновлю свой ответ, чтобы показать это.

Ответ №2:

Во-первых, пожалуйста, делайте отступы в своем HTML-коде, задавая вопрос.

попробуйте выполнить следующее для центрирования .heading-section

 .heading-section {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Ответ №3:

У вас должна быть оболочка, которая содержит как изображение, так и заголовок, и, когда эта оболочка наведена на вас, изображение размывается.

Естественно, вы можете центрировать раздел заголовка так, как упоминал Кевин.

Итак, основываясь на том, что я сказал, что мое решение будет таким: тот же html и css станут чем-то вроде:

 .iss {
    width: 100%;
    z-index: -1;
    left: 0;
    transition: all 0.5s ease-in-out;
}

.heading-section {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dgs-heading {
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: auto;
}

.dgs-para {
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.iss:hover {
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

.dragon-sim {
    position: relative;
}

.dragon-sim:hover > .iss {
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

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

Кроме того, текст не очень удобочитаем, я бы посоветовал добавить прозрачный фон для раздела заголовка

Также обратите внимание, что я удалил pointer-events: none; , поскольку в этом больше нет необходимости, плюс к тому, что вы не сможете нажать кнопку, поэтому вы определенно не хотите использовать это свойство

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

2. Я отредактировал свое решение после того, как решение Джона заставило меня понять, что на самом деле изображение не обязательно должно иметь абсолютное позиционирование 🙂

Ответ №4:

Если вы измените значение .heading-section на position: absolute , и pointer-events: none , наведение курсора будет проходить до базового изображения.

Просмотрите это в режиме полной страницы:

 .iss {
    width: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 50px;
    transition: all 0.5s ease-in-out;
}

/* heading overlay: use absolute positioning */
.heading-section {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* passes hover to img */
}

.dgs-heading {
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: auto;
}

.dgs-para {
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* override "pointer-events: none" to allow button click */
.dgs-btn {
    pointer-events: auto;
}

.iss:hover {
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

 <div class="dragon-sim">
  <img class="iss"
       src="https://spacecraftearth.com/wp-content/uploads/2017/06/ISS-Earth-Mediterranean-2.jpg"
       alt="iss-img"/>
  <div class="heading-section">
    <h1 class="dgs-heading">SpaceX Dragon 2 Simulator</h1>
    <p class="dgs-para">Dock the SpaceX Dragon 2 Satellite to the
      International Space Station in this realtime simulator with the controls
      our astronauts use on their missions.</p>
    <button class="dgs-btn" onclick="alert('click')">Try Now</button>
  </div>
</div>

Развернуть фрагмент

1. Приятно, что ваше решение работает :), единственная проблема, которую я хочу упомянуть, заключается в том, что в вашей реализации кнопка внутри раздела заголовка недоступна для просмотра, я решил это по-другому в своем решении 🙂