1. 首頁
  2. 問答
  3. 懸停在浮動元素上時發生CSS問題

懸停在浮動元素上時發生CSS問題

2017-09-20 87 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

相關問題

 相關問題