Randy Goldsmith Randy Goldsmith - 6 months ago 15
jQuery Question

Hover effect over <a> tag is hidden and doesn't work, how do i get it to work?

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 click 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.
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>')
}

Answer

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.