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

Question

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. 我在a：悬停标签上添加了边框，当您将鼠标悬停在任何框上时，它会做一些奇怪的事情。 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. 问题似乎出在我的onlineBorders（）函数或CSS代码中。 Here is the link: http://codepen.io/duel_drawer8/pen/QNxyNq?editors=0001 这是链接： http : //codepen.io/duel_drawer8/pen/QNxyNq?editors=0001

CSS: 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: 使用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

So if you are just trying to add a hover to the rectangles all you need to do is replace 因此，如果您只是想将鼠标悬停在矩形上，则只需替换

a:hover{
 border: 2px solid;
}

with 同

#rectangles:hover{
 background-color: white;
 border: 2px solid blue;
 box-sizing: border-box
}

You can check it out here: http://codepen.io/gogojojo/pen/aZoxYq 您可以在这里查看： http : //codepen.io/gogojojo/pen/aZoxYq

Also I would try avoiding using ids when you have more than one of type of whatever. 另外，当您拥有多种类型的一种时，我会尽量避免使用ID。 It would make much more sense to add a class rectangles to all of the boxes instead of an id. 将类矩形添加到所有框而不是id会更有意义。

Answer 2

You weren't very clear about what is "weird," but I think you just need to add this to your CSS: 您不太清楚什么是“怪异”，但是我认为您只需要将其添加到CSS中即可：

a {
  display:block;
}

Anchors are inline elements, so you need to make then block or inline-block for the border to display properly. 锚点是内联元素，因此您需要先进行然后阻止或内联阻止，边界才能正确显示。

To clean up the style a little more, you can try: 要多整理一点样式，可以尝试：

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

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

As Joseph mentioned, you have the same ID used for several elements in your HTML, which is not valid markup. 正如Joseph所提到的，您具有用于HTML中多个元素的相同ID，这是无效的标记。 An ID must be unique for the page. 该页面的ID必须唯一。

My CSS above works by selecting all the anchors to apply the style, but you may consider adding a new CSS class to apply the style with. 我上面的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