当按钮悬停时，坐在按钮后面的图像被查看

时间：2017-04-09 02:15:48

标签： html css

＆＃13;
＆＃13; 
.main {
	width: 1280px;
	background-color: antiquewhite;
	margin:auto;
}

.header {
	width: 100%;
	height: 150px;
	background-color: black;
	float: left;
	position: relative;
	z-index: 2;
	overflow: hidden;
}

.homebutton {
	height: 80%;
	width:auto;
	float: left;
	padding-left: 10px;
	padding-top: 10px;
}

.hometitle {
	width:100%;
	height:100%;
	color:white;
	text-align: center;
	vertical-align: middle;
	line-height: 150px;
	font-family: 'Gloria Hallelujah', cursive;
	font-size: 33px;
	float:left;
	position:absolute;
	
}

h1 {
	font-family: 'Gloria Hallelujah', cursive;
	font-size: 20px;
	color: black;
	font-weight: 100;
	vertical-align: middle;
	text-align: center;
}

.menubar {
	width: 100%;
	height: 80px;
	background-color:antiquewhite;
	float: left;
	/*PARENT CONTAINER */
}

.button1 {
	width: 25%;
	height: 100%;
	background-color:black;
	z-index: 1;
	float:left;
	position:relative;
	font-family: 'Gloria Hallelujah', cursive;
	color:white;
	font-size: 16px;
	text-align: center;
	/* CHILD CONTAINER */
}

.button1:hover {
	background-color: antiquewhite;
	border: thick;
	
	color: black;
}


.buttonimage {
	width: 200px;
    height: auto;
	position:absolute;
	padding-left: 60px;
	padding-right: 60px;
	z-index: 0;
	top: -180px;
	opacity: 0;
	transition: 1.0s;
	animation: spin 2.8s linear infinite;
	overflow: hidden;
	/* CHILD CONTAINER */
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.button1:hover .buttonimage {
	top:30px;
	opacity: 1;
	overflow: hidden
}

.heroimage {
	width: 100%;
	height: 800px;
	position: absolute;
	background-color:antiquewhite;
	float: left;
	overflow:hidden;
}

.imageslider {

}

.infocolumn {
	width: 20%;
	height: 200px;
	background-color: blue;
	float:left;
}

.footer {
	position:inherit;
	width: 100%;
	height: 200px;
	background-color: white;
	float:left;
＆＃13; 
</head>

<body>

<div class="main">

	
	<div class="header">
	
		<div class="homebutton">
			<img src="logo.png" height="120px" />
		</div>
		<div class="hometitle">
		Jet Black Cat Music	
		</div>
		
	
	</div>
	
	<div class="menubar">
	
		<div class="button1">
		Pre-orders
			<div class="buttonimage">
				<img src="vinyl_menu.png" width="100%" height="auto" alt=""/>
			</div>
			
		</div>
		
		<div class="button1"> 
	  	In-Stores
		  <div class="buttonimage">
				<img src="vinyl_menu.png" width="100%" height="auto" alt=""/>
			</div>
		</div>
		
		<div class="button1">
			Events
		  <div class="buttonimage">
				<img src="vinyl_menu.png" width="100%" height="auto" alt=""/>
			</div>
		</div>
		
		<div class="button1">
			Contact
			<div class="buttonimage">
				<img src="vinyl_menu.png" width="100%" height="auto" alt=""/>
			</div>
		</div>

	</div>
	
	<div class="heroimage">
		
	</div>
	<div class="footer">	
	</div>
	
</div>



</body>
＆＃13;
＆＃13;
＆＃13;

编辑：我搞砸了几乎让它恢复到原来的位置但是现在只是不能让图像顶部的按钮旋转并在我悬停时向下移动。图像旋转记录。

这是我第一次发帖。一直在阅读其他主题和所有帖子都非常有帮助。我创建了一个非常符合我需要的页面，但是我有一些无法解决的闪烁按钮，我最终将部分代码更改为现在我所拥有的内容已经消失，我不知道如何获取回到原来的位置。

我试图让旋转的图像位于每个菜单按钮后面，当菜单按钮悬停时，按钮向下移动，部分旋转图像显示出来。正如我所说，我有这个工作，但我的按钮只会闪烁。

非常感谢有关如何解决这个问题的一些帮助，我现在似乎只是绕圈子走了

感谢

1 个答案:

答案 0 :(得分：0)

  • 将所有菜单标签放在容器中
  • 将z-index属性应用于标签
  • 以百分比

    选择性地设置标签的样式

    下面的代码段

      .main {
  width: 1280px;
  background-color: antiquewhite;
  margin: auto;
}

.header {
  width: 100%;
  height: 150px;
  background-color: black;
  float: left;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.homebutton {
  height: 80%;
  width: auto;
  float: left;
  padding-left: 10px;
  padding-top: 10px;
}

.hometitle {
  width: 100%;
  height: 100%;
  color: white;
  text-align: center;
  vertical-align: middle;
  line-height: 150px;
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 33px;
  float: left;
  position: absolute;
}

h1 {
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 20px;
  color: black;
  font-weight: 100;
  vertical-align: middle;
  text-align: center;
}

.menubar {
  width: 100%;
  height: 80px;
  background-color: antiquewhite;
  float: left;
  /*PARENT CONTAINER */
}

.button1 {
  width: 20%;
  height: 100%;
  background-color: black;
  z-index: 1;
  float: left;
  position: relative;
  font-family: 'Gloria Hallelujah', cursive;
  color: white;
  font-size: 16px;
  text-align: center;
  border: solid blue;
  overflow: hidden;
  /* CHILD CONTAINER */
}

.button1:hover {
  background-color: antiquewhite;
  border: thick;
  color: black;
}

.buttonimage img {
  width: 200px;
}

.buttonimage {
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  bottom: 100%;
  opacity: 0;
  transition: 1.0s;
  animation: spin 2.8s linear infinite;
  overflow: hidden;
  /* CHILD CONTAINER */
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg) translate(50%;
    0%);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg) translate(50%;
    0%);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.button1:hover .buttonimage {
  bottom: -200%;
  opacity: 1;
  overflow: hidden;
}

.button1:hover {
  overflow: visible;
}

.label {
  display: inline-block;
  position: relative;
  top: 0%;
  color: blue;
  transition: all 1s;
}

.button1:hover .label {
  top: 250px;
  z-index: 5;
}

.heroimage {
  width: 100%;
  height: 800px;
  position: absolute;
  background-color: antiquewhite;
  float: left;
  overflow: hidden;
}

.imageslider {}

.infocolumn {
  width: 20%;
  height: 200px;
  background-color: blue;
  float: left;
}

.footer {
  position: inherit;
  width: 100%;
  height: 200px;
  background-color: white;
  float: left;
    </head>

<body>

  <div class="main">


    <div class="header">

      <div class="homebutton">
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSvPdDmWSbJtqGgr8qMOKew03yzJVKc9ZCYDbfzRKTnMrnrfwIsNg" height="120px" />
      </div>
      <div class="hometitle">
        Jet Black Cat Music
      </div>


    </div>

    <div class="menubar">

      <div class="button1">

        <div class="label">Pre-orders</div>
        <div class="buttonimage">
          <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSvPdDmWSbJtqGgr8qMOKew03yzJVKc9ZCYDbfzRKTnMrnrfwIsNg" width="100%" height="auto" alt="" />
        </div>

      </div>

      <div class="button1">
        <span class="label">In-Stores</span>
        <div class="buttonimage">
          <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSvPdDmWSbJtqGgr8qMOKew03yzJVKc9ZCYDbfzRKTnMrnrfwIsNg" width="100%" height="auto" alt="" />
        </div>
      </div>

      <div class="button1">
        <span class="label">Events</span>
        <div class="buttonimage">
          <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSvPdDmWSbJtqGgr8qMOKew03yzJVKc9ZCYDbfzRKTnMrnrfwIsNg" width="100%" height="auto" alt="" />
        </div>
      </div>

      <div class="button1">
        <span class="label">Contact</span>
        <div class="buttonimage">
          <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSvPdDmWSbJtqGgr8qMOKew03yzJVKc9ZCYDbfzRKTnMrnrfwIsNg" width="100%" height="auto" alt="" />
        </div>
      </div>

    </div>

    <div class="heroimage">

    </div>
    <div class="footer">
    </div>

  </div>
  <br> 


</body>

    • 相关问题
    最新问题