Html линия границы кнопки удаляет контур при наведении курсора после щелчка - PullRequest
Новая
       0

Html линия границы кнопки удаляет контур при наведении курсора после щелчка

1 голос
/ 20 июня 2020

У меня есть кнопка HTML, и я не могу убрать границу до go. Я пробовал границу: нет; вместе с каждым управляемым поведением с возможностью нажатия. Итак, при активном, наведении и фокусировке добавление контура: нет; и border-line: none все еще помещает черную линию вокруг кнопки, которая находится на оранжевом фоновом изображении. 

.gsbutton {
	position: absolute;
	float: left;
	margin: -10px 183px;
	align-items: right;	
	width: 135px;
	height: 50px;
	text-decoration: none;
	display: inline-block;
	background-image: url(https://i.stack.imgur.com/s5K46.png);
	z-index: -1; 
}
button[type="reset"]:focus, active, hover {
    outline: none; 
	border: none;	
}   
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
  <link rel="stylesheet" type="text/css" href="attributes.css">
</head>
<body>
<!-- page bar header navigation tabs -->
<div class="head_bg">
	<div class="wrap">
		<div class="logo">
			<a href="index.html">
				<img src="file:///C:/Develop/CodeSamples/manage-landing-page-master/images/logo.svg"></img>
			</a>
		</div>
		<nav class="nav_menu">
			<a class="active" href="index.html">Home</a>
			<a class="active" id="pricingheader" href="pricing.html"> Pricing</a>
			<a class="active" href="product.html" > Products</a>
			<a class="active" href="about.html"> About Us</a>
			<a class="active" href="community.html"> Community</a>
		</nav>
	</div>
	<button class="gsbutton"></button>
</div>
<div class="main">
	<div class="container">
		<div class="row">
			<div class="table-row">
				<div class="mycolumn" id="sidebar">
					<h1 class="promo_slogan"> Bring everyone together to build better products.</h1>
					<p></p>
				</div>
				<div class="mycolumn" id="content"><img src="">
				</div>
			</div>
		</div>
	</div>

button

Ответы [ 2 ]

1 голос
/ 20 июня 2020
  1. у вас нет типа кнопки «сброс», поэтому это не сработает. добавить границу: none в класс кнопки, то есть .gsbutton
  2. После вышеуказанного изменения в вашем коде есть еще одна проблема, вы используете "Position": "absolute" , что не нужен вообще. Так что вы должны это удалить. Из-за этого не запускается наведение. 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.gsbutton {
	
	float: left;
	margin: -10px 183px;
	width: 135px;
	height: 50px;
	text-decoration: none;
	display: inline-block;
	background-image: url(https://i.stack.imgur.com/s5K46.png);
	z-index: -1; 
}

.gsbutton:hover {
  border : none;
}

</style>
</head>
<body>

<div class="head_bg">
	<div class="wrap">
		<div class="logo">
			<a href="index.html">
				<img src="file:///C:/Develop/CodeSamples/manage-landing-page-master/images/logo.svg"></img>
			</a>
		</div>
		<nav class="nav_menu">
			<a class="active" href="index.html">Home</a>
			<a class="active" id="pricingheader" href="pricing.html"> Pricing</a>
			<a class="active" href="product.html" > Products</a>
			<a class="active" href="about.html"> About Us</a>
			<a class="active" href="community.html"> Community</a>
		</nav>
	</div>
	<button class="gsbutton"></button>
</div>
<div class="main">
	<div class="container">
		<div class="row">
			<div class="table-row">
				<div class="mycolumn" id="sidebar">
					<h1 class="promo_slogan"> Bring everyone together to build better products.</h1>
					<p></p>
				</div>
				<div class="mycolumn" id="content"><img src="">
				</div>
			</div>
		</div>
	</div>
	

</body>
</html>
0 голосов
/ 20 июня 2020

попробуйте это 

button[type="reset"]:focus, button[type="reset"]:active, button[type="reset"]:hover {
    outline: none; 
    border: none;   
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...