个人中心
gpt4 book ai didi

html - 如何使元素在悬停时可见？

转载 作者：行者123 更新时间：2023-11-28 00:41:03 26 4
gpt4 key购买 nike

我不确定如何让父 div 的子项在悬停时可见。当其中一个字形图标悬停在上方以显示与其对应的文本时，我希望文本轻松淡入。我想让每个菜单项在悬停时轻松滑出，但我不知道如何在 css3 中设置缓动。

@charset "utf-8";
/* CSS Document */

html{
	display: block;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}

body {
	display: block;
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(36,36,36,1.00);
	background-image:url(../img/bg.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

#BoarLogo{
	width: 30%;
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	opacity: 0.7;
	z-index: -1;
}

#MainNav{
	width: auto;
	height: auto;
	position: absolute;
    top: 50%;
    left: 7em;
    transform: translate(-50%, -50%);
	margin: 20px;
	
}
#MainNav ul{
	position: relative;
	width: auto;
	height: auto;
	list-style: none;
	padding: 0;
	margin: 10px;;
}

.placeholder{
	padding: 10px;
	height: 80px;
	width: 250px;
	overflow: hidden;
	position: relative

}

.placeholder a img{
	display: block;
	float: left;
	margin-right: 10px;
	
}

.placeholder a span{
	width: auto;
	height: auto;
	position: relative;
	float: left;
	display: inline-block;
	margin-top: 20px;
	color: #FFF;
	font-family: 'Fredericka the Great', serif;
	font-size: 30px;
	text-align: left;
}

.placeholder:hover{
}

.linkItem:hover{
	padding-left: 20px;
}

.linkItem{
	height: auto;
	width: auto;
	display: block;
	position: relative;
	float: left;
}

.linkItem img{
	
}

.linkItem span {
	
	
}

#BoarLogo img{
	height: auto;
	width: 100%;
}

@media screen and (max-width: 600px){
/* handles css for smart phones.*/
	#BoarLogo {
		width: 80%;
		height: auto;
	}
	
	#MainNav{
		
    	
	}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Wild Boar Homepage</title>
<meta name="description" content="Wild Boar Cafe Restaurant is a coffeehouse in Fort Collins Colorado. ">
<meta name="keywords" content="Coffee, Fort Collins, Colorado, Restaurant, Latte, Mocha, Food,  ">
<link href="css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/main.js"></script>
<link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
</head>

<body>
	<nav id="MainNav">
		<ul>
			<li class="placeholder"><a class="linkItem" href="#"><img style="height: 80px; width: 80px;" alt="Home icon" src="img/home.png"><span>Home</span></a></li>
			<li class="placeholder"><a class="linkItem" href="#"><img alt="About icon" style="height: 80px; width: 80px;" src="img/info.png"><span>About</span></a></li>
			<li class="placeholder"><a class="linkItem" href="#"><img alt="Menu icon" style="height: 80px; width: 80px;" src="img/menu.png"><span>Menu</span></a></li>
			<li class="placeholder"><a class="linkItem" href="#"><img alt="Catering icon" style="height: 80px; width: 80px;" src="img/Catering_icon (1).png"><span>Catering</span></a></li>
			<li class="placeholder"><a class="linkItem" href="#"><img alt="Contact icon" style="height: 80px; width: 80px;" src="img/contact.png"><span>Contact</span></a></li>
		</ul>
	</nav>
	<div id="BoarLogo"><img alt="Wild Boar Cage Logo" src="img/BoarLogo.png" /></div><!-- End main background logo-->
</body>
</html>

最佳答案

要获得淡入/淡出效果，您可以将文本的不透明度设置为 0，并在悬停父元素时将其更改为 1。

您还需要定义转换:

transition: all 1s ease;

  • all - 表示每次属性变化都会有过渡效果
  • 1s - 转换需要 1 秒
  • ease - 转换计时函数

如果您想要不同的悬停效果，您必须使用 JavaScript。

我对您的 HTML 做了一些更改，使用类来设置元素的样式，不要使用内联样式 (style="height: 80px; width: 80px;")，它使您的代码更具可读性和更易于维护。 

@charset "utf-8";

/* CSS Document */

html {
  display: block;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body {
  display: block;
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(36, 36, 36, 1.00);
  background-image: url(../img/bg.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

#BoarLogo {
  width: 30%;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.7;
  z-index: -1;
}

#MainNav {
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 7em;
  transform: translate(-50%, -50%);
  margin: 20px;
}

#MainNav ul {
  position: relative;
  width: auto;
  height: auto;
  list-style: none;
  padding: 0;
  margin: 10px;
  ;
}

.placeholder {
  padding: 10px;
  height: 80px;
  width: 250px;
  overflow: hidden;
  position: relative
}

.placeholder a img {
  display: block;
  float: left;
  margin-right: 10px;
}

.placeholder a span {
  width: auto;
  height: auto;
  position: relative;
  float: left;
  display: inline-block;
  margin-top: 20px;
  color: #FFF;
  font-family: 'Fredericka the Great', serif;
  font-size: 30px;
  text-align: left;
}

.placeholder:hover {}

.linkItem:hover {
  padding-left: 20px;
}

.linkItem {
  height: auto;
  width: auto;
  display: block;
  position: relative;
  float: left;
}

.linkItem img {
  height: 80px;
  width: 80px;
}

.linkItem span {
  opacity: 0;
  transition: all 1s ease;
}

#BoarLogo img {
  height: auto;
  width: 100%;
}

.linkItem:hover span{
  opacity: 1;
}

@media screen and (max-width: 600px) {
  /* handles css for smart phones.*/
  #BoarLogo {
    width: 80%;
    height: auto;
  }
  #MainNav {}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Wild Boar Homepage</title>
  <meta name="description" content="Wild Boar Cafe Restaurant is a coffeehouse in Fort Collins Colorado. ">
  <meta name="keywords" content="Coffee, Fort Collins, Colorado, Restaurant, Latte, Mocha, Food,  ">
  <link href="css/main.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="js/main.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
</head>

<body>
  <nav id="MainNav">
    <ul>
      <li class="placeholder">
        <a class="linkItem" href="#">
          <img alt="Home icon" src="img/home.png">
          <span>Home</span>
        </a>
      </li>
      <li class="placeholder">
        <a class="linkItem" href="#">
          <img alt="About icon" src="img/info.png">
          <span>About</span>
        </a>
      </li>
      <li class="placeholder">
        <a class="linkItem" href="#">
          <img alt="Menu icon" src="img/menu.png">
          <span>Menu</span>
        </a>
      </li>
      <li class="placeholder">
        <a class="linkItem" href="#">
          <img alt="Catering icon" src="img/Catering_icon (1).png">
          <span>Catering</span>
        </a>
      </li>
      <li class="placeholder">
        <a class="linkItem" href="#">
          <img alt="Contact icon" src="img/contact.png">
          <span>Contact</span>
        </a>
      </li>
    </ul>
  </nav>
  <div id="BoarLogo"><img alt="Wild Boar Cage Logo" src="img/BoarLogo.png" /></div>
  <!-- End main background logo-->
</body>

</html>

关于html - 如何使元素在悬停时可见？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53510776/

26 4 0
文章推荐： javascript - 适用于 Chrome 但不适用于 Firefox 的 JS/CSS 代码
文章推荐： c++ - 测试 Doom 3 Stack 实现时堆栈损坏
文章推荐： javascript - 使用 React 获取选择值
文章推荐： javascript - jQuery 通过 1 个按钮切换所有段落不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com