所以我一直在尝试为我们在学校制作的网络创建这个图库，它似乎有效，但是当你在gif上看到鼠标悬停在img上时会出现一个小错误。 我不知道是不是因为边框大小，或者我应该使用表而不是div。我感谢任何帮助。
div#img {
border-radius: 5px;
margin: 5px;
padding: 5px;
border: 3px solid #3781FF;
height: 140;
width: 100;
float: left;
text-align: center;
}
div#img img {
margin: 4px;
border: 2px solid #000000;
}
div#img a:hover img {
border-radius: 40px;
border:0px solid #3781FF;
text-align: center;
}
div#desc {
text-align: center;
font-weight: normal;
width: 100px;
}<!DOCTYPE HTML>
<meta charset="utf-8" />
<html>
<head>
<link rel="stylesheet" type="text/css" href="estil.css" />
<link rel="stylesheet" type="text/css" href="galeria.css" />
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:400,200' rel='stylesheet' type='text/css'>
<title> LoL - Stats </title>
<script type='text/javascript' src='jquery-1.7.1.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
//Crear un event de click
$('ul.listado li a').click(function() {
//Pasar es text a minuscules
var textoFiltro = $(this).text().toLowerCase().replace(/\s/g,"-");
//mostrar tots si se pitja
if(textoFiltro == 'todos')
{
$('div.filtros div.hidden').fadeIn('slow').removeClass('hidden');
}
else
{
//bucle per obtenir tots es divs amb clase filtro
$('.filtros div').each(function() {
if(!$(this).hasClass(textoFiltro))
{
$(this).fadeOut('normal').addClass('hidden');
}
//Mostar amb animacio fade-in
else
{
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
});
</script>
</head>
<body>
<div class="center" style="width: 900px;background-color: #FFFFFF">
<a href="index.html"><div id="titol">
LoL Stats
</div></a>
<div id="barrabotons">
<a href="champs.html"><div id="boto">
Champions
</div> </a>
<a href="classi.html"><div id="boto">
Worlds
</div> </a>
<a href="patch.html"><div id="boto">
Patch
</div> </a>
<a href="rotacion.html"><div id="boto">
Rotación Setmanal
</div> </a>
</div>
<div id="bodydiv">
<h1 style="color:#3781FF; text-shadow: 0px 2px 3px #555;">Campeones</h1>
<section>
<ul class="listado">
<li><a href="#">Todos</a></li>
<li><a href="#">Magos</a></li>
<li><a href="#">Tanques</a></li>
<li><a href="#">Asesinos</a></li>
<li><a href="#">Suports</a></li>
</ul>
<div class="filtros">
<div id="img" class="asesinos">
<a><img src="img/champs/aatrox.png" width="80" height="80"></a>
<div id="desc" class="asesinos">Aatrox<br>6300 RP</div>
</div>
<div id="img" class="magos">
<a><img src="img/champs/ahri.png" width="80" height="80"></a>
<div id="desc">Ahri<br>4800 RP</div>
</div>
<div id="img" class="magos">
<a><img src="img/champs/akali.png" width="80" height="80"></a>
<div id="desc">Akali<br>1350 RP</div>
</div>
<div id="img">
<a><img src="img/champs/alistar.png" width="80" height="80"></a>
<div id="desc">Alistar<br>450 RP</div>
</div>
<div id="img">
<a><img src="img/champs/amumu.png" width="80" height="80"></a>
<div id="desc">Ammumu<br>450 RP</div>
</div>
<div id="img" class="magos">
<a><img src="img/champs/anivia.png" width="80" height="80"></a>
<div id="desc">Anivia<br>3150 RP</div>
</div>
<div id="img" class="magos">
<a><img src="img/champs/annie.png" width="80" height="80"></a>
<div id="desc">Annie<br>450 RP</div>
</div>
<div id="img">
<a><img src="img/champs/ashe.png" width="80" height="80"></a>
<div id="desc">Ashe<br>450 RP</div>
</div>
<div id="img" class="magos">
<a><img src="img/champs/azir.png" width="80" height="80"></a>
<div id="desc">Azir<br>6300 RP</div>
</div>
<div id="img">
<a><img src="img/champs/bard.png" width="80" height="80"></a>
<div id="desc">Bardo<br>6300 RP</div>
</div>
<div id="img">
<a><img src="img/champs/blitzcrank.png" width="80" height="80"></a>
<div id="desc">Blitzcrank<br>1350 RP</div>
</div>
<div id="img" class="magos">
<a><img src="img/champs/brand.png" width="80" height="80"></a>
<div id="desc">Brand<br>3150 RP</div>
</div>
<div id="img">
<a><img src="img/champs/braum.png" width="80" height="80"></a>
<div id="desc">Braum<br>6300 RP</div>
</div>
<div id="img">
<a><img src="img/champs/caitlyn.png" width="80" height="80"></a>
<div id="desc">Caitlyn<br>4800 RP</div>
</div>
<div id="img" class="magos">
<a><img src="img/champs/cassiopea.png" width="80" height="80"></a>
<div id="desc">Cassiopeia<br>4800 RP</div>
</div>
<div id="img">
<a><img src="img/champs/chogath.png" width="80" height="80"></a>
<div id="desc">Cho'Gath<br>450 RP</div>
</div>
<div id="img">
<a><img src="img/champs/corki.png" width="80" height="80"></a>
<div id="desc">Corki<br>3150 RP</div>
</div>
<div id="img" class="asesinos">
<a><img src="img/champs/irelia.png" width="80" height="80"></a>
<div id="desc" class="asesinos">Irelia<br>3150 RP</div>
</div>
</div>
<section>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
你忘了添加＆＃34; px＆＃34; div的宽度和高度属性＃img。
div#img {
border-radius: 5px;
margin: 5px;
padding: 5px;
border: 3px solid #3781FF;
height: 140px;
width: 100px;
float: left;
text-align: center;
}
答案 1 :(得分：0)
试试这个： Demo
div#img a:hover img border:0px solid #3781FF;这是问题所在。这已更改为border-color:transparent;或border: 2px solid #3781FF;