堆栈内存溢出
  简体   繁体   English

将鼠标悬停在float元素上时出现CSS问题

[英]CSS issues when hovering over a float element

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

问题描述

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 . 我正在CSS中创建一个带有2个选项的options元素的网站，并且当您将鼠标悬停在它上面时，该选项的颜色应该会更改，例如此处 。 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: 这是我的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>

The css for the other page is identical only change is #o2.hover instead of #o1.hover 其他页面的CSS相同，只是更改是＃o2.hover而不是＃o1.hover

4 个解决方案

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

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

Missing semicolon between float and width: 浮点数和宽度之间缺少分号：

o1 { 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

Try This css only 仅尝试此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将鼠标悬停在重叠元素上时，样式悬停状态 - Style hover state of element when hovering over overlapping elements with CSS 将鼠标悬停在单个元素CSS上时如何触发两个悬停 - How to trigger two hovers when hovering over single element CSS CSS 在<span>元素</span>上悬停时显示信息框 - CSS Display InfoBox on hovering over <span> Element 通过将鼠标悬停在单独的元素上来触发CSS动画 - Trigger CSS animations by hovering over a seperate element CSS-将鼠标悬停在元素上会影响多个元素 - CSS - hovering over element affects multiple elements 在CSS中将鼠标悬停在div上时显示内容 - 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 当鼠标悬停在firefox中的子元素上时 - When hovering over a child element in firefox 将鼠标悬停在元素上时，光标不变 - Cursor is Not Changing When Hovering Over an Element
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM