stackoom
  简体   繁体   中英

CSS issues when hovering over a float element

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

Question

I'm making a website in CSS with an options element that has 2 options, and the color of the option should change when you hover over it, like here . But when I switch to the other side the hover changes the color of the entire bar like it shows here . I need it to change color just on the half the mouse is hovering over.

Here's my css and 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>

The css for the other page is identical only change is #o2.hover instead of #o1.hover

4 answers

solution1
 1  2017-09-20 05:02:17

You should change the background-color: #77AD78; on hover not the 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>

solution2
 0  2017-09-20 04:52:08

Missing semicolon between float and width:

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>

solution3
 0  2017-09-20 04:54:15

Try This css only 

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

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Style hover state of element when hovering over overlapping elements with CSS How to trigger two hovers when hovering over single element CSS CSS Display InfoBox on hovering over <span> Element Trigger CSS animations by hovering over a seperate element CSS - hovering over element affects multiple elements Show content when hovering over div in CSS Specify the location of the tooltip when hovering over an element Make function stop when hovering over an element When hovering over a child element in firefox Cursor is Not Changing When Hovering Over an Element
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM