更改:focus和:hover后的文本

我正在创建一个网站。默认情况下，我想在div上有一个好看的图标，但是当用户将鼠标悬停在这个div或键焦点上时，我想隐藏图标并显示文本"Home"， " offer& quot;等。

.page-nav-menu {
height: 45px;
width: 100%;
margin: auto;
text-align: center;
}
.nav-menu-option {
height: 100%;
width: 120px;
text-align: center;
background: black;
color: white;
font-size: 22px;
padding: 5px;
padding-top: 20px !important;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
transition: 0.5 background;
margin: auto;
margin-right: 10px !important;
}
.nav-menu-option:focus,
.nav-menu-option:hover {
outline: none;
background: #1b63f4c8;
transition: 0.5 background;
cursor: pointer;
outline: none;
}
.page-nav-menu a {
color: #1b63f4c8;
border-bottom: none;
}
.page-nav-menu a:focus,
.page-nav-menu a:hover {
outline: none;
border-bottom: none;
}
#nav-option-1 {
width: 100px;
margin-left: 350px;
}
#nav-option-1::before {
content: '';
}
#nav-option-1::after,
#nav-option-1:hover {
content: Home;
}
#nav-option-2 {
width: 130px;
}
a {
color: #1a1a1a;
text-decoration: none;
border-bottom: 3px solid black;
border-radius: 1px;
}
a:focus,
a:hover {
border-bottom: 3px solid #1b63f4;
border-radius: 1px;
}

<div class="page-nav-menu flex">
<a href="/">
<div class="nav-menu-option" id="nav-option-1"><i class="fa-solid fa-house-chimney"></i></div>
</a>
<a href="offer">
<div class="nav-menu-option"><i class="fa-solid fa-laptop-code"></i></div>
</a>
<a href="realisations">
<div class="nav-menu-option" id="nav-option-2"><i class="fa-solid fa-globe"></i></div>
</a>
<a href="about-me">
<div class="nav-menu-option">fa-solid fa-user</div>
</a>
<a href="contact">
<div class="nav-menu-option"><i class="fa-solid fa-envelope"></i></div>
</a>
</div>

我能做什么?

亲切的问候

我是一名新程序员，所以我不确定我是否能帮助你，但这是我的结果

结果:

const iconElement = document.querySelector('.fa-globe'); /*icon element*/
const nav_menu_option = document.getElementById('nav-option-2')/*nav option element */
nav_menu_option.addEventListener('mouseenter', () => {
iconElement.style.display = 'none';
nav_menu_option.innerHTML = 'realisations' ;
})

nav_menu_option.addEventListener('mouseleave', () => {
iconElement.style.display = 'block'/*or whatever you want*/;
nav_menu_option.innerHTML = '<i class="fa-solid fa-globe"></i>';
})

<html>
<body>
<a href="realisations">
<div class="nav-menu-option" id="nav-option-2"><i class="fa-solid fa-globe"></i></div>
</a>
</body>
<script src="https://kit.fontawesome.com/8367bf7b85.js" crossorigin="anonymous"></script>
</html>

我真的真的希望我能帮到你。

你可以把icon放到div里面，把display:none;属性放到nav-menu-option:hover里面

.page-nav-menu {
height: 45px;
width: 100%;
margin: auto;
text-align: center;
}
.nav-menu-option .text {
display: none;
}
.nav-menu-option {
height: 100%;
width: 120px;
text-align: center;
background: black;
color: white;
font-size: 22px;
padding: 5px;
padding-top: 20px !important;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
transition: 0.5 background;
margin: auto;
margin-right: 10px !important;
}
.nav-menu-option:focus,
.nav-menu-option:hover {
outline: none;
background: #1b63f4c8;
transition: 0.5 background;
cursor: pointer;
outline: none;
}
.page-nav-menu a {
color: #1b63f4c8;
border-bottom: none;
}
.page-nav-menu a:focus,
.page-nav-menu a:hover {
outline: none;
border-bottom: none;
}
#nav-option-1 {
width: 100px;
margin-left: 350px;
}
#nav-option-1::before {
content: '';
}
#nav-option-1::after,
#nav-option-1:hover {
content: Home;
}
#nav-option-2 {
width: 130px;
}
a {
color: #1a1a1a;
text-decoration: none;
border-bottom: 3px solid black;
border-radius: 1px;
}
a:focus,
a:hover {
border-bottom: 3px solid #1b63f4;
border-radius: 1px;
}
.nav-menu-option:hover .icon {
display: none;
}

.nav-menu-option:hover .text {
display: block;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js"></script>
<div class="page-nav-menu flex">
<a href="/">
<div class="nav-menu-option"><div class="icon"><i class="fa-solid fa-house-chimney"></i></div><div class="text">Home</div></div>
</a>
<a href="offer">
<div class="nav-menu-option"><div class="icon"><i class="fa-solid fa-laptop-code"></i></div><div class="text">Offer</div></div>
</a>
<a href="realisations">
<div class="nav-menu-option"><div class="icon"><i class="fa-solid fa-globe"></i></div><div class="text">Realisation</div></div>
</a>
<a href="about-me">
<div class="nav-menu-option"><div class="icon">
<i class="fa-solid fa-user"></i>
</div><div class="text">About me</div></div>
</a>
<a href="contact">
<div class="nav-menu-option"><div class="icon"><i class="fa-solid fa-envelope"></i></div><div class="text">Contact</div></div>
</a>
</div>

如果你想使用渐隐效果，可以使用:)

PS:优化你的代码并删除不必要的

body {
margin: 0;
padding: 0;
}
.page-nav-menu {
text-align: center;
}
.page-nav-menu a {
text-decoration: none;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.nav-menu-option {
position: relative;
display: inline-block;
margin: 0 5px 5px;
padding: 20px 5px;
width: 120px;
font-size: 1.5em;
border-radius: 0 0 40px 40px;
background: black;
color: white;
transition: all 0.5s ease;
}
.nav-menu-option:focus,
.nav-menu-option:hover {
background: #1b63f4c8;
cursor: pointer;
}
.nav-menu-option>* {
transition: visibility 0.5s, opacity 0.3s linear;
}
.nav-menu-option>.title {
font-family: 'Courier New', Courier, monospace;
position: absolute;
left: 0;
right: 0;
opacity: 0;
bottom: 30%;
text-transform: uppercase;
visibility: hidden;
}
.nav-menu-option:hover .title,
.nav-menu-option:focus .title {
visibility: visible;
opacity: 1;
}
.nav-menu-option:hover .icon,
.nav-menu-option:focus .icon {
opacity: 0;
visibility: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" />
<div class="page-nav-menu flex">
<a href="#">
<div class="nav-menu-option">
<i class="fa-solid fa-house-chimney icon"></i>
<span class="title">Home</span>
</div>
</a>
<a href="#">
<div class="nav-menu-option">
<i class="fa-solid fa-laptop-code icon"></i>
<span class="title">Laptop</span>
</div>
</a>
<a href="#">
<div class="nav-menu-option">
<i class="fa-solid fa-globe icon"></i>
<span class="title">Global</span>
</div>
</a>
<a href="#">
<div class="nav-menu-option">
<i class="fa-solid fa-user icon"></i>
<span class="title">User</span>
</div>
</a>
<a href="#">
<div class="nav-menu-option">
<i class="fa-solid fa-envelope icon"></i>
<span class="title">Mail</span>
</div>
</a>
</div>

试试下面的方法，在每个子元素上使用display none和display block应该可以工作

CSS
<style>
.page-nav-menu {
height: 45px;
width: 100%;
margin: auto;
text-align: center;
}
.nav-menu-option {
height: 100%;
width: 120px;
text-align: center;
background: black;
color: white;
font-size: 22px;
padding: 5px;
padding-top: 20px !important;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
transition: 0.5 background;
margin: auto;
margin-right: 10px !important;
}
.nav-menu-option:focus,
.nav-menu-option:hover {
outline: none;
background: #1b63f4c8;
transition: 0.5 background;
cursor: pointer;
outline: none;
}
.page-nav-menu a {
color: #1b63f4c8;
border-bottom: none;
}
.page-nav-menu a:focus,
.page-nav-menu a:hover {
outline: none;
border-bottom: none;
}
#nav-option-1 {
width: 100px;
margin-left: 350px;
}
#nav-option-1::before {
content: "";
}
#nav-option-1::after,
#nav-option-1:hover {
content: Home;
}
#nav-option-2 {
width: 130px;
}
a {
color: #1a1a1a;
text-decoration: none;
border-bottom: 3px solid black;
border-radius: 1px;
}
a:focus,
a:hover {
border-bottom: 3px solid #1b63f4;
border-radius: 1px;
}
.nav-menu-option:hover i {
display: none;
}
.nav-menu-option:hover span {
display: block;
}
.nav-menu-option span {
display: none;
}
</style>





Html 
<div class="page-nav-menu flex">
<a href="/">
<div class="nav-menu-option" id="nav-option-1">
<i class="fa-solid fa-house-chimney"></i><span>home</span>
</div>
</a>
<a href="offer">
<div class="nav-menu-option">
<i class="fa-solid fa-laptop-code"></i><span>gallery</span>
</div>
</a>
<a href="realisations">
<div class="nav-menu-option" id="nav-option-2">
<i class="fa-solid fa-globe"></i><span>etc</span>
</div>
</a>
<a href="about-me">
<div class="nav-menu-option">
<i class="fa-solid fa-user"></i><span>test</span>
</div>
</a>
<a href="contact">
<div class="nav-menu-option">
<i class="fa-solid fa-envelope"></i><span>test</span>
</div>
</a>
</div>

相关内容

最新更新

热门标签：