1. 首页
  2. 问答
  3. 悬停在浮动元素上时发生CSS问题

悬停在浮动元素上时发生CSS问题

2017-09-20 43 views
0

我在CSS中制作了一个带有2个选项的选项元素的网站，当您将鼠标悬停在其上时，该选项的颜色应该会更改，如here。但是当我切换到另一侧时，悬停改变了整个酒吧的颜色，就像它显示here。我需要它改变颜色只是鼠标悬停在一半。悬停在浮动元素上时发生CSS问题

这里是我的CSS和HTML：

#header { 
 
    background-color: #77AD78; 
 
    color: white; 
 
    width: 100%; 
 
    text-align: center; 
 
    font-family: Roboto, Roboto, Roboto; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
#options { 
 
    background-color: #77AD78; 
 
    width: 100%; 
 
    color: white; 
 
    font-weight: bold; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
a:link { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 
a:visited { 
 
    color: white; 
 
} 
 

 
a:hover { 
 
    color: #77AD78; 
 
} 
 

 
#o1 { 
 
    float: left width: 50%; 
 
    text-align: center; 
 
} 
 

 
#o2 { 
 
    float: right; 
 
    width: 50%; 
 
    text-align: center; 
 
    color: #6F8F72; 
 
} 
 

 
#o1:hover { 
 
    background-color: #8FD694; 
 
    color: #77AD78; 
 
}
<html> 
 

 
<head> 
 
    <title>Stylish</title> 
 
    <link rel="stylesheet" type="text/css" href="stylehistoric.css" /> 
 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCp2b5o90_5K1NbK5qZj86P6Hn61xhUFII&libraries=places&callback=initMap" async defer></script> 
 
    <script> 
 
    function initMap() { 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
     center: { 
 
      lat: 11.019343, 
 
      lng: -74.850179 
 
     }, 
 
     zoom: 16 
 
     }); 
 
     var id1 = document.getElementById('textt'); 
 
     var autocomplete = new google.maps.places.Autocomplete(id1); 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div id="header"> 
 
    <h1>abcr design</h1> 
 
    <div id="options"> 
 
     <div id="o2">Histórico</div> 
 
     <div id="o1"><a href="styletest.php">Tracking</a></div> 
 
    </div>

为其他页面的CSS是相同的唯一的变化是排名第o2.hover代替＃o1.hover

来源

2017-09-20 Grman Rodriguez

回答

0

缺少分号在浮动和宽度之间：

o1 {

float: left width: 50%; 


#header { 
 
    background-color: #77AD78; 
 
    color: white; 
 
    width: 100%; 
 
    text-align: center; 
 
    font-family: Roboto, Roboto, Roboto; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
#options { 
 
    background-color: #77AD78; 
 
    width: 100%; 
 
    color: white; 
 
    font-weight: bold; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
a:link { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 
a:visited { 
 
    color: white; 
 
} 
 

 
a:hover { 
 
    color: #77AD78; 
 
} 
 

 
#o1 { 
 
    float: left; 
 
    width: 50%; 
 
    text-align: center; 
 
} 
 

 
#o2 { 
 
    float: right; 
 
    width: 50%; 
 
    text-align: center; 
 
    color: #6F8F72; 
 
} 
 

 
#o1:hover { 
 
    background-color: #8FD694; 
 
    color: #77AD78; 
 
}
<html> 
 

 
<head> 
 
    <title>Stylish</title> 
 
    <link rel="stylesheet" type="text/css" href="stylehistoric.css" /> 
 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCp2b5o90_5K1NbK5qZj86P6Hn61xhUFII&libraries=places&callback=initMap" async defer></script> 
 
    <script> 
 
    function initMap() { 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
     center: { 
 
      lat: 11.019343, 
 
      lng: -74.850179 
 
     }, 
 
     zoom: 16 
 
     }); 
 
     var id1 = document.getElementById('textt'); 
 
     var autocomplete = new google.maps.places.Autocomplete(id1); 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div id="header"> 
 
    <h1>abcr design</h1> 
 
    <div id="options"> 
 
     <div id="o2">Histórico</div> 
 
     <div id="o1"><a href="styletest.php">Tracking</a></div> 
 
    </div>

来源

2017-09-20 04:52:08 JiangangXiong

+0

这是它。谢谢！ –

0

尝试这个CSS仅

#header { 
    background-color: #77AD78; 
    color: white; 
    width: 100%; 
    text-align: center; 
    font-family: Roboto, Roboto, Roboto; 
    margin-left: auto; 
    margin-right: auto; 
} 

#options { 
    background-color: #77AD78; 
    width: 100%; 
    color: white; 
    font-weight: bold; 
    margin-left: auto; 
    margin-right: auto; 
} 

a:link { 
    text-decoration: none; 
    color: white; 
} 

a:visited { 
    color: white; 
} 

a:hover { 
    color: #77AD78; 
} 

#o1 { 
    float: left; 
    width: 50%; 
    text-align: center; 
} 

#o2 { 
    float: right; 
    width: 50%; 
    text-align: center; 
    color: #6F8F72; 
} 

#o1:hover { 
    background-color: #8FD694; 
    color: #77AD78; 
} 
#o2:hover { 
    background-color: #8FD694; 
    color: #77AD78; 
}

来源

2017-09-20 04:54:15

1

您应该hover不是color

#header { 
 
    background-color: #77AD78; 
 
    color: white; 
 
    width: 100%; 
 
    text-align: center; 
 
    font-family: Roboto, Roboto, Roboto; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
h1 { 
 
    margin:0; 
 
} 
 

 
#options { 
 
    background-color: #77AD78; 
 
    width: 100%; 
 
    color: white; 
 
    font-weight: bold; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
a:link { 
 
    text-decoration: none; 
 
    color: white; 
 
    display: block; 
 
    background-color: #8FD694; 
 
} 
 

 
a:visited { 
 
    color: white; 
 
} 
 

 
a:hover { 
 
    background-color: #77AD78; 
 
} 
 

 
#o1 { 
 
    float: left; 
 
    width: 50%; 
 
    text-align: center; 
 
} 
 

 
#o2 { 
 
    float: right; 
 
    width: 50%; 
 
    text-align: center; 
 
    color: #6F8F72; 
 
}
<div id="header"> 
 
    <h1>abcr design</h1> 
 
    <div id="options"> 
 
    <div id="o2"><a href="#">Histórico</a></div> 
 
    <div id="o1"><a href="styletest.php">Tracking</a></div> 
 
    </div> 
 
</div>
改变

来源

2017-09-20 05:02:17 jafarbtech

0 

#header { 
 
    background-color: #77AD78; 
 
    color: white; 
 
    width: 100%; 
 
    text-align: center; 
 
    font-family: Roboto, Roboto, Roboto; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
#options { 
 
    background-color: #77AD78; 
 
    width: 100%; 
 
    color: white; 
 
    font-weight: bold; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
a:link { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 
a:visited { 
 
    color: white; 
 
} 
 

 
a:hover { 
 
    color: #77AD78; 
 
} 
 

 
#o1 { 
 
    width: 50%; 
 
    text-align: center; 
 
} 
 

 
#o1:hover { 
 
    background-color: #8FD694; 
 
    color: #77AD78; 
 
} 
 

 
#o2 { 
 
    float: right; 
 
    width: 50%; 
 
    text-align: center; 
 
    color: #6F8F72; 
 
} 
 

 
#o2:hover { 
 
    background-color: #8FD694; 
 
    color: #77AD78; 
 
}
<html> 
 

 
<head> 
 
    <title>Stylish</title> 
 
    <link rel="stylesheet" type="text/css" href="stylehistoric.css" /> 
 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCp2b5o90_5K1NbK5qZj86P6Hn61xhUFII&libraries=places&callback=initMap" async defer></script> 
 
    <script> 
 
    function initMap() { 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
     center: { 
 
      lat: 11.019343, 
 
      lng: -74.850179 
 
     }, 
 
     zoom: 16 
 
     }); 
 
     var id1 = document.getElementById('textt'); 
 
     var autocomplete = new google.maps.places.Autocomplete(id1); 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div id="header"> 
 
    <h1>abcr design</h1> 
 
    <div id="options"> 
 
     <div id="o2">Histórico</div> 
 
     <div id="o1"><a href="styletest.php">Tracking</a></div> 
 
    </div>

来源

2017-09-20 05:17:08

相关问题

 相关问题