悬停不适用于列表中的所有元素

时间：2018-05-30 05:51:30

标签： html css hover 

     JsonObjectRequest jsonObjReq = new   JsonObjectRequest(com.android.volley.Request.Method.POST, Url__, ipObject,
                            new Response.Listener<JSONObject>() {
                                @Override
                                public void onResponse(JSONObject response) {
                                listener.resultJson(null, response);
            }, new Response.ErrorListener() {

                @Override
                public void onErrorResponse(VolleyError error) {
    }

  body{
  background: url("Mypic.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.btns12{
position: absolute;
width: 1200px;
margin-left:0px;
margin-right: auto;
margin-top: 0px;
}
h1{
  color:gray;
  text-transform: uppercase;
  font-size: 70px;
  font-family: sans-serif;
  margin-top: 450px;
  text-align: center;
  margin-left: 250px;
}

.button{

  margin-left: 500px;
}

.btn{
  border: 1px solid white;
  color: pink;
 font-family: inherit;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 13px;
  text-transform: uppercase;
}
.btn1:hover{
  background:white;
}
.btn2:hover{
    background:white;
}
.tabs{
float: right;
list-style: none;
margin-top: 30px;
}
.tabs li{
  display: inline-block;
}
.tabs li a{
  color: white;
  font-family: inherit;
   padding: 5px 30px;
   text-decoration: none;
   background: pink;
   height: 100%;
}
 .tabs li a:hover{
  border:1px solid white;
}

每当我将鼠标悬停在列表中的某个元素上时，我都会尝试显示边框。但是只有最后3个元素才有效。但是，<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Marwa's Services</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="menu"> <ul class="tabs"> <li><a href="http://www.facebook.com/"> Home </a></li> <li><a href="">Contact </a></li> <li><a href="">Help </a></li> <li><a href="">Support </a></li> <li><a href="">FAQ </a></li> <li><a href="">Hello </a></li> </ul> </div> <div class="btns12"> <h1>WE OWN THE STREETS</h1> <div class ="button"> <a href= "http://www.google.com" class= "btn btn1"> Register Now </a>&nbsp; <a href ="https://www.cairorunners.com/" class= "btn btn2"> Watch Video </a> </div> </div> </body> </html> Home Contact无效

这是html 

Help

，这是列表元素的css 

  <div class="menu">
<ul class="tabs">
<li><a href="http://www.facebook.com/"> Home </a></li>
<li><a href="">Contact </a></li>
<li><a href="">Help</a></li>
<li><a href="">Support </a></li>
<li><a href="">FAQ </a></li>
<li><a href="">Hello </a></li>
</ul>
</div>

这是整个css代码：

       .tabs{
    float: right;
    list-style: none;
    margin-top: 30px;
    }
    .tabs li{
      display: inline-block;
    }
    .tabs li a{
      color: white;
      font-family: inherit;
       padding: 5px 30px;
       text-decoration: none;
       background: pink;
       height: 100%;
    }
     .tabs li a:hover{
      border:1px solid white;
    }

这是完整的HTML代码：

    body{
  background: url("Mypic.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.btns12{
position: absolute;
width: 1200px;
margin-left:0px;
margin-right: auto;
margin-top: 0px;
}
h1{
  color:gray;
  text-transform: uppercase;
  font-size: 70px;
  font-family: sans-serif;
  margin-top: 450px;
  text-align: center;
  margin-left: 250px;
}

.button{

  margin-left: 500px;
}

.btn{
  border: 1px solid white;
  color: pink;
 font-family: inherit;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 13px;
  text-transform: uppercase;
}
.btn1:hover{
  background:white;
}
.btn2:hover{
    background:white;
}
.tabs{
float: right;
list-style: none;
margin-top: 30px;
}
.tabs li{
  display: inline-block;
}
.tabs li a{
  color: white;
  font-family: inherit;
   padding: 5px 30px;
   text-decoration: none;
   background: pink;
   height: 100%;
}
 .tabs li a:hover{
  border:1px solid white;
}

7 个答案:

答案 0 :(得分：1)

你添加这个css 

.btns12{
position: absolute;
width: 1200px;
margin-left:0px;
margin-right: auto;
margin-top: 0px;
top:70px;
}

会覆盖您的菜单，因此请添加top:70px;并检查

  body{
  background: url("Mypic.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.btns12{
position: absolute;
width: 1200px;
margin-left:0px;
margin-right: auto;
margin-top: 0px;
top:70px;
}
h1{
  color:gray;
  text-transform: uppercase;
  font-size: 70px;
  font-family: sans-serif;
  margin-top: 450px;
  text-align: center;
  margin-left: 250px;
}

.button{

  margin-left: 500px;
}

.btn{
  border: 1px solid white;
  color: pink;
 font-family: inherit;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 13px;
  text-transform: uppercase;
}
.btn1:hover{
  background:white;
}
.btn2:hover{
    background:white;
}
.tabs{
float: right;
list-style: none;
margin-top: 30px;
}
.tabs li{
  display: inline-block;
}
.tabs li a{
  color: white;
  font-family: inherit;
   padding: 5px 30px;
   text-decoration: none;
   background: pink;
   height: 100%;
}
 .tabs li a:hover{
  border:1px solid white;
}
<div class="menu">
    <ul class="tabs">
    <li><a href="http://www.facebook.com/"> Home </a></li>
    <li><a href="">Contact </a></li>
    <li><a href="">Help </a></li>
    <li><a href="">Support </a></li>
    <li><a href="">FAQ </a></li>
    <li><a href="">Hello </a></li>
    </ul>
    </div>
<div class="btns12">
<h1>WE OWN THE STREETS</h1>
<div class ="button">
<a href= "http://www.google.com" class= "btn btn1"> Register Now </a>&nbsp;

<a href ="https://www.cairorunners.com/" class= "btn btn2"> Watch Video </a>
</div>
</div>

答案 1 :(得分：0)

将此css规则添加到类.tabs 

.tabs {

    position: relative;
    z-index: 100;

}

答案 2 :(得分：0)

body {
  background: url("http://www.wallpapers4u.org/wp-content/uploads/patterns_background_dark_texture_50408_1920x1080-450x253.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.btns12 {
  position: initial;
  width: 1200px;
  margin-left: 0px;
  margin-right: auto;
  margin-top: 0px;
}

h1 {
  color: gray;
  text-transform: uppercase;
  font-size: 70px;
  font-family: sans-serif;
  margin-top: 450px;
  text-align: center;
  margin-left: 250px;
}

.button {
  margin-left: 500px;
}

.btn {
  border: 1px solid white;
  color: pink;
  font-family: inherit;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 13px;
  text-transform: uppercase;
}

.btn1:hover {
  background: white;
}

.btn2:hover {
  background: white;
}

.tabs {
  float: right;
  list-style: none;
  margin-top: 30px;
}

.tabs li {
  display: inline-block;
}

.tabs li a {
  color: white;
  font-family: inherit;
  padding: 5px 30px;
  text-decoration: none;
  background: pink;
  height: 100%;
}

.tabs li a:hover {
  border: 1px solid white;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Marwa's Services</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="menu">
    <ul class="tabs">
      <li><a href="http://www.facebook.com/"> Home </a></li>
      <li><a href="">Contact </a></li>
      <li><a href="">Help </a></li>
      <li><a href="">Support </a></li>
      <li><a href="">FAQ </a></li>
      <li><a href="">Hello </a></li>
    </ul>
  </div>
  <div class="btns12">
    <h1>WE OWN THE STREETS</h1>
    <div class="button">
      <a href="http://www.google.com" class="btn btn1"> Register Now </a>&nbsp;

      <a href="https://www.cairorunners.com/" class="btn btn2"> Watch Video </a>
    </div>
  </div>
</body>

</html>

答案 3 :(得分：0)

添加：

.menu {
    width: 100%;
    text-align: right;
}

并从.tabs

中删除float: right

答案 4 :(得分：0)

在你的风格中添加属性可能对你有帮助.... 

  .tabs{
     z-index: 1;
     position: relative;
    }
    .tabs li a{
        border:1px solid transparent;
}

答案 5 :(得分：0)

她已编辑您的代码以使其正常工作。试试这个。

<!DOCTYPE html>
<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <title>Marwa's Services</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body>
    <div class="menu">
      <ul class="tabs">
        <li><a href="http://www.facebook.com/"> Home </a></li>
        <li><a href="">Contact </a></li>
        <li><a href="">Help </a></li>
        <li><a href="">Support </a></li>
        <li><a href="">FAQ </a></li>
        <li><a href="">Hello </a></li>
      </ul>
    </div>
    <div class="btns12">
      <h1>WE OWN THE STREETS</h1>
      <div class="button">
        <a href="http://www.google.com" class="btn btn1"> Register Now </a>&nbsp;

        <a href="https://www.cairorunners.com/" class="btn btn2"> Watch Video </a>
      </div>
    </div>
  </body>

</html>

和CSS，

body {
  background: url("Mypic.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.btns12 {}

h1 {
  color: gray;
  text-transform: uppercase;
  font-size: 70px;
  font-family: sans-serif;
  text-align: center;
}

.button {
  text-align: center;
}

.btn {
  border: 1px solid white;
  color: pink;
  font-family: inherit;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 13px;
  text-transform: uppercase;
}

.btn1:hover {
  background: white;
}

.btn2:hover {
  background: white;
}

.tabs {
  float: right;
  list-style: none;
  margin-top: 30px;
}

.tabs li {
  display: inline-block;
}

.tabs li a {
  color: white;
  font-family: inherit;
  padding: 5px 30px;
  text-decoration: none;
  background: pink;
  height: 100%;
}

.tabs li a:hover {
  border: 1px solid white;
}

答案 6 :(得分：0)

只需将overflow: hidden设为.menu

即可 

body{
  background: url("Mypic.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.btns12{
position: absolute;
width: 1200px;
margin-left:0px;
margin-right: auto;
margin-top: 0px;
}
h1{
  color:gray;
  text-transform: uppercase;
  font-size: 70px;
  font-family: sans-serif;
  margin-top: 450px;
  text-align: center;
  margin-left: 250px;
}

.button{

  margin-left: 500px;
}

.btn{
  border: 1px solid white;
  color: pink;
 font-family: inherit;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 13px;
  text-transform: uppercase;
}
.btn1:hover{
  background:white;
}
.btn2:hover{
    background:white;
}
.tabs{
float: right;
list-style: none;
margin-top: 30px;
}
.tabs li{
  display: inline-block;
}
.tabs li a{
  color: white;
  font-family: inherit;
   padding: 5px 30px;
   text-decoration: none;
   background: pink;
   height: 100%;
}
 .tabs li a:hover{
  border:1px solid white;
}
.menu {
  overflow: hidden;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Marwa's Services</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="menu">
    <ul class="tabs">
    <li><a href="http://www.facebook.com/"> Home </a></li>
    <li><a href="">Contact </a></li>
    <li><a href="">Help </a></li>
    <li><a href="">Support </a></li>
    <li><a href="">FAQ </a></li>
    <li><a href="">Hello </a></li>
    </ul>
    </div>
<div class="btns12">
<h1>WE OWN THE STREETS</h1>
<div class ="button">
<a href= "http://www.google.com" class= "btn btn1"> Register Now </a>&nbsp;

<a href ="https://www.cairorunners.com/" class= "btn btn2"> Watch Video </a>
</div>
</div>
  </body>
</html>

相关问题
最新问题