#html #css #hover
Вопрос:
Я поместил селектор :наведение курсора в .content, но он не работает, вместо этого селектор наведения фона вступает в действие всякий раз, когда над ним наводят курсор. Когда оба .showcase:наведения удаляются из css, он вступает в действие. В чем причина того же и что делать, если мне нужны как .content:наведение, так и .showcase:наведение?
body { background: rgba(0, 0, 0, 0.9); margin: 0; color: #fff; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .showcase::before { content: ""; height: 100vh; width: 100%; background-image: url(https://image.ibb.co/gzOBup/showcase.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; display: block; filter: blur(10px); -webkit-filter: blur(10px); transition: all 1000ms; } .content:hover{ filter: blur(10px); /* why is this effect not working */ } .showcase:hover::before { filter: blur(0px); -webkit-filter: blur(0px); } .showcase:hover .content { filter: blur(2px); -webkit-filter: blur(2px); } .content { position: absolute; z-index: 1; top: 10%; left: 50%; margin-top: 105px; margin-left: -145px; width: 300px; height: 350px; text-align: center; transition: all 1000ms; } .content .logo { height: 180px; width: 180px; } .content .title { font-size: 2.2rem; margin-top: 1rem; } .content .text { line-height: 1.7; margin-top: 1rem; } lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt; lt;meta charset="UTF-8" /gt; lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /gt; lt;link rel="stylesheet" href="index.css" /gt; lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" /gt; lt;titlegt;Blur Landinglt;/titlegt; lt;/headgt; lt;bodygt; lt;header class="showcase"gt; lt;div class="content"gt; lt;img src="https://image.ibb.co/ims4Ep/logo.png" class="logo" alt="Traversy Media" /gt; lt;div class="title"gt;Welcome To Traversy Medialt;/divgt; lt;div class="text"gt; Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, vel. lt;/divgt; lt;/divgt; lt;/headergt; lt;/bodygt; lt;/htmlgt; Ответ №1:
Ваш селектор
.content:hover{ filter: blur(10px); } Переопределяется другим селектором
.showcase:hover::before { filter: blur(0px); -webkit-filter: blur(0px); } Независимо от того, наведете ли вы на него курсор, showcase селектор вместо этого вступит в силу.
Решение заключается в установке более конкретного селектора наведения.
.content:hover, .showcase:hover .content:hover { filter: blur(10px); // Covers the "double" hover. } body { background: rgba(0, 0, 0, 0.9); margin: 0; color: #fff; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .showcase::before { content: ""; height: 100vh; width: 100%; background-image: url(https://image.ibb.co/gzOBup/showcase.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; display: block; filter: blur(10px); -webkit-filter: blur(10px); transition: all 1000ms; } .content:hover, .showcase:hover .content:hover { filter: blur(10px); } .showcase:hover::before { filter: blur(0px); -webkit-filter: blur(0px); } .showcase:hover .content { filter: blur(2px); -webkit-filter: blur(2px); } .content { position: absolute; z-index: 1; top: 10%; left: 50%; margin-top: 105px; margin-left: -145px; width: 300px; height: 350px; text-align: center; transition: all 1000ms; } .content .logo { height: 180px; width: 180px; } .content .title { font-size: 2.2rem; margin-top: 1rem; } .content .text { line-height: 1.7; margin-top: 1rem; } lt;header class="showcase"gt; lt;div class="content"gt; lt;img src="https://image.ibb.co/ims4Ep/logo.png" class="logo" alt="Traversy Media" /gt; lt;div class="title"gt;Welcome To Traversy Medialt;/divgt; lt;div class="text"gt; Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, vel. lt;/divgt; lt;/divgt; lt;/headergt;