Question

我创建了这个网站，因为这是我们的项目

<!DOCTYPE html>

<html>
<head>
<title>
    Anivies
</title>.
<link rel="shortcut icon" href="non.jpg" type="image/png">
<style>

Css，我认为主要问题在这里？每当我尝试将鼠标悬停在按钮（动漫）上时，它总是使按钮（电影）向右移动这不是教给我们的，我自己很多想法，但仍然没有

body{
    margin: 0px;
    background-color: #cecece;
}

.header{
    width: 100%;
    height: 68px;
    background-color: #000000;  
    position: fixed;
    top: 0px;
    padding-top: 10px;
    padding-left: 7px;
}
.headcon{
    width: 100%;
    height: 73px;
    background-color:#cecece ;
    position: fixed;
    height: 100%;
    width: 100%;
}
.body{
    margin:0px;
    height: 100%;
    width: 100%;
    position:fixed;
    top:50px;
    float: left;
    clear: both;
    overflow: hidden;
}
.footer{
    width: 100%;
    height: 50px;
    background-color: #000000;
    position: fixed;
    bottom: 0px;
}
.button{
    border: 0px;
    height: 55px;
    width: 100px;
    background-color: white;
    position: relative;

}
.button:hover{
    opacity: 0.5;
    background-color:#f43f3f;
    box-shadow: 4px 5px 7px;
    transition:all 0.3s ease 0s;
    cursor:pointer;
}
p{
    font-family: batmanforeveralternate;
    font-size: 17px;
}
.butcon{
    float: left;
    overflow: hidden;
    margin-left: 10px;
    position: relative;
}
#Animelist, #Movielist{
    display: none;
    background-color: gray;
    height: 100px;
    width: 200px;
 }
 }

Jquery的

 </style>
 <script src= "JQuery/jquery-1.12.0.js"></script>
 <script>
    //FirstButton   
    $(document).ready(function(){
    $("#but1").hover(function(){
    $("#Animelist").stop().slideToggle(300);
    });
    });

    //SecondButton
    $(document).ready(function(){
    $("#but2").hover(function(){
    $("#Movielist").stop().slideToggle(300);
    });
    });
</script>
</head>
<body>
<div class="headcon">
<div class="header">
<div class="butcon">
        <button class="button">
            <div id="but1"><p>Anime</p></div>
        </button>   
        <div id="Animelist">
            <a href="#">One</a>
        </div>
</div>
<div class="butcon">
        <button class="button">
            <div id="but2"><p>Movies</p></div>
        </button>
        <div id="Movielist">
            <a href="#">One</a>
        </div>
</div>
    </div>  


<div class="body">
</div>

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

Answer 1

将position: absolute;添加到您的#Animelist,#Movielist css

//FirstButton   
$(document).ready(function() {
  $("#but1, #Animelist").hover(function() {
    $("#Animelist").stop().slideToggle(300);
  });

  //SecondButton
  $("#but2, #Movielist").hover(function() {
    $("#Movielist").stop().slideToggle(300);
  });
});

body {
  margin: 0px;
  background-color: #cecece;
}

.header {
  width: 100%;
  height: 68px;
  background-color: #000000;
  position: fixed;
  top: 0px;
  padding-top: 10px;
  padding-left: 7px;
}

.headcon {
  width: 100%;
  height: 73px;
  background-color: #cecece;
  position: fixed;
  height: 100%;
  width: 100%;
}

.body {
  margin: 0px;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 50px;
  float: left;
  clear: both;
  overflow: hidden;
}

.footer {
  width: 100%;
  height: 50px;
  background-color: #000000;
  position: fixed;
  bottom: 0px;
}

.button {
  border: 0px;
  height: 55px;
  width: 100px;
  background-color: white;
  position: relative;
}

.button:hover {
  opacity: 0.5;
  background-color: #f43f3f;
  box-shadow: 4px 5px 7px;
  transition: all 0.3s ease 0s;
  cursor: pointer;
}

p {
  font-family: batmanforeveralternate;
  font-size: 17px;
}

.butcon {
  float: left;
  overflow: hidden;
  margin-left: 10px;
  position: reletive;
}

#Animelist,
#Movielist {
  display: none;
  background-color: gray;
  height: 100px;
  width: 200px;
  position: absolute;
}


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="headcon">
  <div class="header">
    <div class="butcon">
      <button class="button">
            <div id="but1"><p>Anime</p></div>
        </button>
      <div id="Animelist">
        <a href="#">One</a>
      </div>
    </div>
    <div class="butcon">
      <button class="button">
            <div id="but2"><p>Movies</p></div>
        </button>
      <div id="Movielist">
        <a href="#">One</a>
      </div>
    </div>

每当我将鼠标悬停在一个按钮上时，另一个按钮就会向右移动

1 个答案: