Наведите курсор на поле
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.
Следующее, что изображение будет размыто при наведении курсора. Но проблема в том, что отступы или поля мешают и блокируют эффект наведения.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Во-первых, сделайте отступ в HTML-коде, когда задаете вопрос.
попробуйте следующее, чтобы центрировать .heading-section
.heading-section {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Если вы измените .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>Хорошо, что ваше решение работает :), единственная проблема, о которой я хочу упомянуть, заключается в том, что с вашей реализацией кнопка внутри раздела заголовка не активна, я решил это по-другому в своем решении :)
Вам нужна оболочка, которая содержит как изображение, так и заголовок, и, когда эта оболочка наводится на вас, затем размывает изображение.
Естественно, вы можете центрировать раздел заголовка так, как упомянул Кевин.
Итак, исходя из того, что я сказал, моим решением будет тот же 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;, так как он больше не нужен, к тому же вы не сможете нажать кнопку, поэтому вы определенно не хотите использовать это свойство.
Также мой ответ решает различные проблемы, но вы все равно можете добавить некоторые другие стили, такие как выравнивание текста и тому подобное, но это уже должно решить основную проблему, которую вы задали в вопросе, который я считаю
Я отредактировал свое решение после того, как решение Джона заставило меня понять, что на самом деле изображение не должно иметь абсолютное позиционирование :)
Возможно, это то, что вы ищете. Удалите pointer-events: none; и замените position: absolute; на .heading-section вместо изображения. А также добавить этот код:
.dragon-sim {
position: relative;
text-align: center;
}
Вот рабочий пример (я изменил className на class только для запуска этого примера, просто измените его обратно для реакции)
Обновлено: добавьте это в свой 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>Это центрирует заголовок, но как только вы наводите на него курсор, размытие фона исчезает, на самом деле это не указано в вопросе, но я думаю, что этого не должно происходить.
Это очень легко исправить. Просто добавьте это в код CSS: .dragon-sim:hover .iss { -webkit-filter: blur(5px); filter: blur(5px); } Я обновлю свой ответ, чтобы показать это.
Если ваш z-индекс равен -1, как вы ожидаете, что изображение будет наведено? Я не думаю, что ваше поле или отступы являются проблемой здесь