stackoom
  简体   繁体   中英

how to cover full button width on hover in html css

 原文  2018-09-09 00:48:09  4   1    javascript/ html/ css/ button/ hover

Question

Button without hover:

没有悬停的按钮

Button on hover :

悬停按钮

I started to code a website but left with some styling errors. How can I cover that part left on button while hovering . Every time i hover that part is unhovered.

HTML code for that button(full menu) is : 

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="Vendor/css/normalize.css"> <link rel="stylesheet" type="text/css" href="Vendor/css/grid.css"> <link rel="stylesheet" type="text/css" href="vendor/css/generic.css" /> <link rel="stylesheet" type="text/css" href="Resources/css/styles.css"> <link href="https://unpkg.com/ionicons@4.3.0/dist/css/ionicons.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="vendor/css/js-image-slider.css"> <link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet" type="text/css"> <title>Homepage</title> <link rel="apple-touch-icon" sizes="180x180" href="/resources/favicons/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/resources/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/resources/favicons/favicon-16x16.png"> <link rel="manifest" href="/resources/favicons/site.webmanifest"> <link rel="mask-icon" href="/resources/favicons/safari-pinned-tab.svg" color="#5bbad5"> <link rel="shortcut icon" href="/resources/favicons/favicon.ico"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-config" content="/resources/favicons/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> </head> <body> <header> <!-- *******************************--> <!-- First ROW MENU --> <!-- *******************************--> <nav> <div class="main-nav"> <ul class="row"> <li class="btn"><a href="http://onourem.com/onourem-ambassador-funship.html" target="_blank">funship program details</a></li> <li class="btn"><a href="resources/pdf/alumnimeet2018.pdf" target="_blank">alumni &amp; fairwell meet-2018</a></li> <li class="btn"><a href="resources/img/add30102017.jpg">requirment: faculty/other staff</a></li> <li class="btn"><a href="resources/pdf/information_brochure.pdf" target="_blank">information brochure</a></li> <li class="btn"><a href="resources/pdf/admission_form.pdf" target="_blank">download form</a></li> <li class="btn"><a href="#">student grievance</a></li> </ul> </div> </nav>

CSS code for that button (full menu) is : 

 /*=================================Common=================*/ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { background-color: #f0f0f0; color: #555; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 20px; text-rendering: optimizeLegibility; } p { font-weight: 500; } /*========================resuable=============*/ .row { max-width: 1140px; margin: 0 auto; } section { padding: 15px 0; } .box { padding: 1%; } .list-item a:link, .list-item a:visited { text-decoration: none; transition: color 0.2s; } .list-item a:hover, .list-item a:active { color: #4285f4; } /*==============================Heading====================*/ h1, h2, h3 { font-weight: 800; letter-spacing: 1px; } h1 { margin-top: 0; margin-bottom: 10px; font-size: 150%; word-spacing: 4px; } h2 { font-size: 180%; word-spacing: 2px; text-align: center; margin-bottom: 25px; } h3 { font-size: 80%; margin-bottom: 15px; } /*====================Button=========================*/ .btn:hover, .btn:active, input[type=submit]:hover, input[type=submit]:active { background-color: rgba(204, 204, 204, 0.24); } /*==============================main-nav====================*/ .main-nav { background-color: #535353; border-bottom: 1px solid #393939; } .main-nav ul li { list-style: none; display: inline-block; text-transform: uppercase; border-right: 1px solid #929292; font-size: 50%; padding: 10px; } .main-nav li a { text-decoration: none; color: #fff; }

thanks for the help in advance

1 answers

solution1
 0  2018-09-09 04:16:26

Its because of newline characters when you use inline-block, add font-size:0 to the ul and font-size:12px to li can fix the problem 

 /*=================================Common=================*/ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { background-color: #f0f0f0; color: #555; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 20px; text-rendering: optimizeLegibility; } p { font-weight: 500; } /*========================resuable=============*/ .row { max-width: 1140px; margin: 0 auto; font-size: 0; } section { padding: 15px 0; } .box { padding: 1%; } .list-item a:link, .list-item a:visited { text-decoration: none; transition: color 0.2s; } .list-item a:hover, .list-item a:active { color: #4285f4; } /*==============================Heading====================*/ h1, h2, h3 { font-weight: 800; letter-spacing: 1px; } h1 { margin-top: 0; margin-bottom: 10px; font-size: 150%; word-spacing: 4px; } h2 { font-size: 180%; word-spacing: 2px; text-align: center; margin-bottom: 25px; } h3 { font-size: 80%; margin-bottom: 15px; } /*====================Button=========================*/ .btn:hover, .btn:active, input[type=submit]:hover, input[type=submit]:active { background-color: rgba(204, 204, 204, 0.24); } /*==============================main-nav====================*/ .main-nav { background-color: #535353; border-bottom: 1px solid #393939; } .main-nav ul li { list-style: none; display: inline-block; text-transform: uppercase; border-right: 1px solid #929292; font-size: 50%; padding: 10px; font-size: 12px; } .main-nav li a { text-decoration: none; color: #fff; } 
 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="Vendor/css/normalize.css"> <link rel="stylesheet" type="text/css" href="Vendor/css/grid.css"> <link rel="stylesheet" type="text/css" href="vendor/css/generic.css" /> <link rel="stylesheet" type="text/css" href="Resources/css/styles.css"> <link href="https://unpkg.com/ionicons@4.3.0/dist/css/ionicons.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="vendor/css/js-image-slider.css"> <link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet" type="text/css"> <title>Homepage</title> <link rel="apple-touch-icon" sizes="180x180" href="/resources/favicons/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/resources/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/resources/favicons/favicon-16x16.png"> <link rel="manifest" href="/resources/favicons/site.webmanifest"> <link rel="mask-icon" href="/resources/favicons/safari-pinned-tab.svg" color="#5bbad5"> <link rel="shortcut icon" href="/resources/favicons/favicon.ico"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-config" content="/resources/favicons/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> </head> <body> <header> <!-- *******************************--> <!-- First ROW MENU --> <!-- *******************************--> <nav> <div class="main-nav"> <ul class="row"> <li class="btn"><a href="http://onourem.com/onourem-ambassador-funship.html" target="_blank">funship program details</a></li> <li class="btn"><a href="resources/pdf/alumnimeet2018.pdf" target="_blank">alumni &amp; fairwell meet-2018</a></li> <li class="btn"><a href="resources/img/add30102017.jpg">requirment: faculty/other staff</a></li> <li class="btn"><a href="resources/pdf/information_brochure.pdf" target="_blank">information brochure</a></li> <li class="btn"><a href="resources/pdf/admission_form.pdf" target="_blank">download form</a></li> <li class="btn"><a href="#">student grievance</a></li> </ul> </div> </nav>

暂无
暂无

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 How to make hover to full width HTML/CSS Underline full width How would I make the slider cover the full width and height of this page? How to animate a element that cover full screen width and not overflow How do I create this hover button Using HTML, css and javascript Full Width of Horizontal Accordion (HTML, CSS, JQuery) Cover HTML Navbar in CSS Flexible full width backgrounds with HTML,CSS and 960.gs How to cover fixed size container with child image keeping full width/height ratio? How to cover an image with a grid (clickable squares) using HTML, CSS, and JS?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM