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

时间：2018-11-28 01:34:58

标签： html css

我不确定如何在悬停时显示父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>

2 个答案:

答案 0 :(得分：1)

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

您还需要定义过渡：

transition: all 1s ease;

  • all-意味着每次属性更改都会产生过渡效果
  • 1秒-转换过程需要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>

答案 1 :(得分：0)

css选择器应为：

.linkItem img:hover > span{
    /* your animation */
}
相关问题
最新问题