I am trying to add a hover over effect on my boxes but it doesn't seem to show when you add a background color. I have added a border to the a: hover tag and when you hover over any box it does something odd. I was told that it is working, but for some reason its just hidden. The problem seems to be in my onlineBorders() function or css code. Here is the link: http://codepen.io/duel_drawer8/pen/QNxyNq?editors=0001
CSS：
body {
background-color: #FF7A5A;
}
#rectangles {
margin: 3px;
}
.container {
margin: 0px auto;
width: 700px;
}
.name {
width: 80px;
padding-top: 25px;
font-weight: bold;
color: #00AAA0;
}
.img-responsive {
height: 70px;
}
#rectangles img {
margin-left: -15px;
}
.description {
padding-top: 25px;
color: #FCF4D9;
}
.topHeader {
border: 2px solid black;
margin: 10px;
}
.topOnline #rectangles {
background: #FFB85F;
}
.middleOffline #rectangles {
background: #462066;
}
.bottomClosed #rectangles {
background: #462066;
}
#allTypes {
background:
}
a:hover{
border: 2px solid;
}
使用Javascript：
function onlineBorders(url, format, status, displayLogo, displayName, infoStreaming) {
$(format).append('<a href="' + url + '" target="_blank"' + '>' + '<div id = "rectangles" class="row ' + status + '"><div id="profilePic" class="col-xs-2">' + '<img class="img-responsive" src=' + displayLogo + '>' + '</div><div class="col-xs-3 text"><p class="name">' + displayName + '</p>' + '</div>' + '<div class="description col-xs-7">' + infoStreaming + '</div></div>' + '</a>')
}
答案 0 :(得分：2)
因此，如果您只是尝试将悬停添加到矩形，则只需替换
即可a:hover{
border: 2px solid;
}
带
#rectangles:hover{
background-color: white;
border: 2px solid blue;
box-sizing: border-box
}
您可以在此处查看：http://codepen.io/gogojojo/pen/aZoxYq
当你有多种类型的东西时，我会尝试避免使用id。将类矩形添加到所有框而不是id会更有意义。
答案 1 :(得分：1)
你不清楚什么是怪异的，＆＃34;但我认为你只需要将它添加到你的CSS中：
a {
display:block;
}
锚点是内联元素，因此您需要使用块或内联块来正确显示边框。
要稍微清理一下风格，你可以尝试：
a {
display:block;
padding:5px;
}
a:hover{
border: 2px solid;
padding:3px;
}
正如约瑟夫所提到的，你有相同的ID用于HTML中的几个元素，这是无效的标记。页面的ID必须是唯一的。
我上面的CSS通过选择要应用样式的所有锚点来工作，但您可以考虑添加一个新的CSS类来应用样式。
答案 2 :(得分：0)
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body class="w3-container">
<h2>Buttons</h2>
<input type="button" class="w3-btn w3-hover-aqua" value="Input Button">
<button class="w3-btn w3-hover-red">Button Button</button>
<a class="w3-btn w3-hover-blue" href="#">Link Button</a>
<h2>Links </h2>
<a href="" class="w3-hover-text-yellow">Hover on the link</a>
</body>
</html>