堆栈内存溢出
  简体   繁体   English

::before 伪元素的过渡没有发生

[英]::before pseudo element's transition is not happening

 原文  2022-02-17 07:50:28  5   2    html/ css/ css-selectors

问题描述

I am Krishna I am targeting .nav-item that when someone hover over it, its ::before pseudo element will change its box-shadow.我是 Krishna 我的目标是.nav-item ，当有人 hover 在它上面时，它的::before伪元素将改变它的框阴影。 But for some reason, it is not happening.但由于某种原因，它没有发生。 Pls tell where I am going wrong.请告诉我哪里出错了。

code:代码：

.html: .html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
    <link rel="stylesheet" href="beautiful-nav-1-style.css">
    <title>Document</title>
</head>
<body>
    <header>
        <nav>
            <img src="Images/logo-angular.svg" alt="logo" id='nav-logo'>
            <ul class="nav-bar">
                <li class="nav-item" id="item1">
                    <a href="#" class='nav-item-a'>
                        <img src="Images/home_black_24dp.svg" alt="">
                        <span class='nav-text'>Home</span>
                    </a>
                </li>
                <li class="nav-item" id="item2">
                    <a href="#" class='nav-item-a'>
                        <span>
                            <img src="Images/group_black_24dp.svg" alt="">
                        </span>
                        <span class='nav-text'>About</span>
                    </a>
                </li>
                <li class="nav-item" id="item3">
                    <a href="#" class='nav-item-a'>
                        <img src="Images/alternate_email_black_24dp.svg" alt="">
                        <span class='nav-text'>Contact Us</span>
                    </a>
                </li>
                <li class="nav-item" id="item4">
                    <a href="#" class='nav-item-a'>
                        <img src="Images/shopping_cart_black_24dp.svg" alt="">
                        <span class='nav-text'>Buy</span>
                    </a>
                </li>
            </ul>
            <div class="search-box" id="nav-search">
                <input type="text" value='Search website'>
            </div>
        </nav>
    </header>
</body>
</html>

.css: .css：

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    background-color: rgb(19, 14, 14);
}

nav {
    display: flex;
    height: 60px;
    width: 90%;
    background-color: white;
    margin: 50px auto;
    justify-content: space-between;
    align-items: center;
}

#nav-logo {
    width: 55px;
    padding-left: 10px;
}

.nav-bar {
    display: flex;
    width: 40%;
    justify-content: space-between;
}

.nav-item {
    list-style: none;
}

.nav-item a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    padding-top: 5px;
    cursor: pointer;
    height: 80px;
    transition: 500ms;
    text-decoration: none;
    color: black;
    font-family: cursive;
    font-weight: bold;
    width: 50px;
}

.nav-text {
    opacity: 0;
    transition: 500ms;
}

.nav-item img {
    width: 50px;
    transition: 500ms;
    border: 3px solid rgb(19, 14, 14);
    border-radius: 50%;
}

ul .nav-item::before {
    content: '';
    position: relative;
    display: block;
    top: 20px;
    left: -18px;
    height: 20px;
    width: 20px;
    background: red;
    border-top-right-radius: 100%;
    box-shadow: 5px -10px rgb(19, 14, 14, 0);
    transition-duration: 500ms;
    transition-property: all;
}

.nav-item:hover .nav-item-a{
    transform: translateY(-30px);
}

.nav-item:hover .nav-item-a img{
    background-color: orangered;
}

.nav-item:hover .nav-text{
    opacity: 1;
}

.nav-item:hover .nav-item::before{
    box-shadow: 5px -10px rgb(19, 14, 14, 1);
}

#nav-search input {
    width: 100px;
    margin-right: 20px;
}

2 个解决方案

解决方案1
 1 已采纳  2022-02-17 08:05:59

The following code is incorrect:以下代码不正确：

.nav-item:hover .nav-item::before{
    box-shadow: 5px -10px rgb(19, 14, 14, 1);
}

The following code should be used instead:应改用以下代码：

.nav-item:hover::before{
    box-shadow: 5px -10px rgb(19, 14, 14, 1);
}

解决方案2
 0  2022-02-17 08:29:27

Try this code试试这个代码

 * { margin: 0px; padding: 0px; box-sizing: border-box; } body { background-color: rgb(19, 14, 14); } nav { display: flex; height: 60px; width: 90%; background-color: white; margin: 50px auto; justify-content: space-between; align-items: center; } #nav-logo { width: 55px; padding-left: 10px; }.nav-bar { display: flex; width: 40%; justify-content: space-between; }.nav-item { list-style: none; }.nav-item a { display: flex; justify-content: space-between; align-items: center; flex-direction: column; padding-top: 5px; cursor: pointer; height: 80px; transition: 500ms; text-decoration: none; color: black; font-family: cursive; font-weight: bold; width: 50px; }.nav-text { opacity: 0; transition: 500ms; }.nav-item img { width: 50px; transition: 500ms; border: 3px solid rgb(19, 14, 14); border-radius: 50%; }.nav-item::before { content: ""; position: relative; display: block; top: 20px; left: -18px; height: 20px; width: 20px; background: red; border-top-right-radius: 100%; transition-duration: 500ms; transition-property: all; }.nav-item:hover::before { box-shadow: 5px -10px rgb(19, 14, 14, 1); }.nav-item:hover.nav-item-a { transform: translateY(-30px); }.nav-item:hover.nav-item-a img { background-color: orangered; }.nav-item:hover.nav-text { opacity: 1; }.nav-item:hover.nav-item::before { box-shadow: 5px -10px rgb(19, 14, 14, 1); } #nav-search input { width: 100px; margin-right: 20px; }
 <header> <nav> <img src="Images/logo-angular.svg" alt="logo" id="nav-logo" /> <ul class="nav-bar"> <li class="nav-item" id="item1"> <a href="#" class="nav-item-a"> <img src="Images/home_black_24dp.svg" alt="" /> <span class="nav-text">Home</span> </a> </li> <li class="nav-item" id="item2"> <a href="#" class="nav-item-a"> <span> <img src="Images/group_black_24dp.svg" alt="" /> </span> <span class="nav-text">About</span> </a> </li> <li class="nav-item" id="item3"> <a href="#" class="nav-item-a"> <img src="Images/alternate_email_black_24dp.svg" alt="" /> <span class="nav-text">Contact Us</span> </a> </li> <li class="nav-item" id="item4"> <a href="#" class="nav-item-a"> <img src="Images/shopping_cart_black_24dp.svg" alt="" /> <span class="nav-text">Buy</span> </a> </li> </ul> <div class="search-box" id="nav-search"> <input type="text" value="Search website" /> </div> </nav> </header>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 伪元素（:: before）的CSS3过渡不起作用 - CSS3 Transition on pseudo element (::before) does not work CSS 区分悬停在元素上和 ::before 伪元素 - CSS distinguish between hover on element and it's ::before pseudo-element 伪元素::隐藏兄弟元素的内容之前 - Pseudo Element ::before Hiding Sibling Element's Content 在 a:before 伪元素上填充 - Padding on a:before pseudo element 在伪元素未显示之前 - Before pseudo element not showing 伪元素：将鼠标悬停在:: before上 - Pseudo element :hover on ::before 在容器的“之前”伪元素中居中 h1 - Center h1 in container's "before" pseudo element 如何仅使用悬停而不使用伪元素之前或之后从底部过渡到顶部？ - How to transition from bottom to top using only hover and without using before or after pseudo element? ::selection 伪选择器忽略 ::before 伪元素 - ::selection pseudo selector ignoring ::before pseudo element ::之后出现伪元素 - ::after pseudo element appearing before
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM