鼠标悬停在<a>标签上的</a>效果<a>被隐藏并且不起作用，如何使它起作用？</a>

Question

我试图在我的盒子上添加悬停效果，但是添加背景色时似乎没有显示。 我在a：悬停标签上添加了边框，当您将鼠标悬停在任何框上时，它会做一些奇怪的事情。 有人告诉我它正在工作，但是由于某种原因它只是隐藏了。 问题似乎出在我的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。 将类矩形添加到所有框而不是id会更有意义。

Answer 2

您不太清楚什么是“怪异”，但是我认为您只需要将其添加到CSS中即可：

a {
  display:block;
}

锚点是内联元素，因此您需要先进行然后阻止或内联阻止，边界才能正确显示。

要多整理一点样式，可以尝试：

a {
  display:block;
  padding:5px;
}

a:hover{
  border: 2px solid;
  padding:3px;
}

正如Joseph所提到的，您具有用于HTML中多个元素的相同ID，这是无效的标记。 该页面的ID必须唯一。

我上面的CSS通过选择所有锚来应用样式来工作，但是您可以考虑添加新的CSS类来应用样式。

Answer 3

 <!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>

鼠标悬停在<a>标签上的</a>效果<a>被隐藏并且不起作用，如何使它起作用？</a>

问题描述

3 个解决方案

解决方案1
2 已采纳 2016-05-27 02:54:22

解决方案2
1 2016-05-27 02:45:55

解决方案3
0 2016-05-27 06:30:38

鼠标悬停在<a>标签上的</a>效果<a>被隐藏并且不起作用，如何使它起作用？</a>

问题描述

3 个解决方案

解决方案1 2 已采纳 2016-05-27 02:54:22

解决方案2 1 2016-05-27 02:45:55

解决方案3 0 2016-05-27 06:30:38

解决方案1
2 已采纳 2016-05-27 02:54:22

解决方案2
1 2016-05-27 02:45:55

解决方案3
0 2016-05-27 06:30:38