Daftar dan Belajar Sekarang!

Cara ngatur size hover

foto iqbal24
1 Kontribusi 0 Coto
2 bulan yang lalu
biar background HOVER ga terlalu mepet ( memperbesar ukuran background) gimana ya? https://imgur.com/RnubcsK.png
HTML:
<ul class="navigasi">	
			<li><a href="" target="blank"> Beranda </a> </li>
			<li><a href="" target="blank"> Gallery </a> </li>
			<li><a href="" target="blank"> Contact </a></li>
</ul>

CSS:
.navigasi {
	border: none;
	list-style: none;
}
.navigasi li{
	float: left;
	padding: 5px 10px;

}
.navigasi li a{
	color: #ffffff;
	text-decoration:none;
}
.navigasi li a:hover {
	background: #a1a1a1;
	color: #000000;

	border-radius: 10%;
	transition: 1s;
	animation-duration: 2s;
	border: none;

Tag: html css

✔ Forum ini sudah terjawab


Jawaban
foto dikisiswanto
3 Kontribusi 5 Coto
2 bulan yang lalu
Padding untuk css-nya ditargetkan ke element .navigasi li a CSS modifikasi:
.navigasi {
  list-style: none;
  background: #333;
  margin: 0;
  padding-left: 25px;
}
.navigasi li{
  display: inline-block;
}
.navigasi li a{
  color: #ffffff;
  display: inherit;
  /* padding taruh di sini */
  padding: 15px 10px;
  text-decoration:none;
}
.navigasi li a:hover {
  background: #a1a1a1;
  color: #000000;
  transition: 1s;
  animation-duration: 1s;
  border: none;
}
answered icon
foto dikisiswanto
3 Kontribusi 5 Coto
2 bulan yang lalu
Padding untuk css-nya ditargetkan ke element .navigasi li a CSS modifikasi:
.navigasi {
  list-style: none;
  background: #333;
  margin: 0;
  padding-left: 25px;
}
.navigasi li{
  display: inline-block;
}
.navigasi li a{
  color: #ffffff;
  display: inherit;
  /* padding taruh di sini */
  padding: 15px 10px;
  text-decoration:none;
}
.navigasi li a:hover {
  background: #a1a1a1;
  color: #000000;
  transition: 1s;
  animation-duration: 1s;
  border: none;
}


Login untuk diksusi di forum sekolah koding