Hover effect over <a> tag is hidden and doesn't work, how do i get it to work?
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. 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>')
}
3 answers
solution1
2 ACCPTED 2016-05-27 02:54:22
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
Also I would try avoiding using ids when you have more than one of type of whatever. It would make much more sense to add a class rectangles to all of the boxes instead of an id.
solution2
1 2016-05-27 02:45:55
You weren't very clear about what is "weird," but I think you just need to add this to your 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. An ID must be unique for the page.
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.
solution3
0 2016-05-27 06:30:38
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.