javascript - 悬停在 标签上的效果被隐藏并且不起作用，我该如何让它起作用？

Question

我正在尝试在我的盒子上添加悬停效果，但当您添加背景颜色时它似乎没有显示。我在 a: hover 标签上添加了一个边框，当你将鼠标悬停在任何框上时，它会做一些奇怪的事情。有人告诉我它正在工作，但由于某种原因它只是隐藏了。问题似乎出在我的 onlineBorders() 函数或 css 代码中。这是链接: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>')
}

Answer 1

所以如果你只是想给矩形添加一个悬停，你需要做的就是替换

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。将类 rectangles 添加到所有框而不是 id 会更有意义。