堆棧內存溢出
  簡體   English   中英

將鼠標懸停在float元素上時出現CSS問題

[英]CSS issues when hovering over a float element

 原文  2017-09-20 04:39:51  0   4    html/ css/ hover/ css-float

問題描述

我正在CSS中創建一個帶有2個選項的options元素的網站，並且當您將鼠標懸停在它上面時，該選項的顏色應該會更改，例如此處 。 但是，當我切換到另一側的懸停改變整個欄的顏色就像它顯示在這里 。 我只需要在鼠標懸停一半時就可以更改顏色。

這是我的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

4 個解決方案

解決方案1
 1  2017-09-20 05:02:17

您應該更改background-color: #77AD78; 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>

解決方案2
 0  2017-09-20 04:52:08

浮點數和寬度之間缺少分號：

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>

解決方案3
 0  2017-09-20 04:54:15

僅嘗試此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;
}

解決方案4
 0  2017-09-20 05:17:08

 #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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用CSS將鼠標懸停在重疊元素上時，樣式懸停狀態 將鼠標懸停在單個元素CSS上時如何觸發兩個懸停 CSS 在<span>元素</span>上懸停時顯示信息框 通過將鼠標懸停在單獨的元素上來觸發CSS動畫 CSS-將鼠標懸停在元素上會影響多個元素 在CSS中將鼠標懸停在div上時顯示內容 將鼠標懸停在元素上時指定工具提示的位置 懸停在元素上時使功能停止 當鼠標懸停在firefox中的子元素上時 將鼠標懸停在元素上時，光標不變
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM