Кнопка без наведения:
Кнопка при наведении:
Я начал кодировать веб-сайт, но остался с некоторыми ошибками стиля. Как я могу закрыть ту часть, которая остается на кнопке, пока парящий. Каждый раз, когда я нахожу указатель, эта часть остается неизменной.
Код HTML для этой кнопки (полное меню):
<!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/[email protected]/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 & 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 для этой кнопки (полное меню):
/*=================================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;
}
Спасибо за помощь в продвижении
Это из-за символов новой строки, когда вы используете встроенный блок, добавьте font-size: 0 в ul и font-size: 12px в li, чтобы решить проблему.
/*=================================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/[email protected]/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 & 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>