Div hover function resize css

Question

I've created a div that contains a box, within that box is text and a link. What I want is when a person hovers over this box with the link, a red line appears on the bottom of the box. At the moment I've managed this but I want the red line to be the width of the grey box and only 5 pixels in height.

#teamspeak_box {
  width: 159px;
  height: 43px;
  background: #212121;
  bottom: 82px;
  right: 76px;
  position: absolute;
  border-radius: 0px 0px 5px 5px;
}
#teamspeak_box_2 {
  width: 43px;
  height: 43px;
  background: #313131;
  bottom: 82px;
  right: 191px;
  position: absolute;
  border-radius: 0px 0px 0px 5px;
}
#teamspeak_text {
  color: white;
  bottom: 93px;
  right: 66px;
  position: absolute;
}
#teamspeak_image {
  bottom: 80px;
  right: 104px;
  position: absolute;
}
#teamspeak_image a:hover {
  background-color: #C62828;
  transition: all 0.5s ease;
}

<div id="teamspeak_box"></div>

<div id="teamspeak_box_2">

</div>
<div id="teamspeak_text">
  <p>TEAMSPEAK
    <P/>
</div>


<div id="teamspeak_image">
  <a href="ts3server://craft412.serveminecraft.net:9987">
    <img src="images/CRAFT412 - Box - Teamspeak.png" alt="TEAMSPEAK">
  </a>
</div>

Please provide a valid example of your result, it seems there is nothing on the link — Martin Shishkov, Jul 14 '15 at 18:19
Really? I put in a gyzao video capture where it says "this" on my question. — , Jul 14 '15 at 18:22

score 0 · Answer 1 · edited May 23 '17 at 12:23

0

Basically you want to change the styling on one element while hovering another. This can be done the following way:

#teamspeak_image a:hover ~ #teamspeak_box {
    background-color: #C62828;
    transition: all 0.5s ease;
}

See this answer for more info. And you might consider adding a border-bottom: 5px solid red; to the box instead of background-color.

edited May 23 '17 at 12:23

Community

1
1

answered Jul 14 '15 at 18:32

Martin Shishkov

2,709
5
27
44

For some reason that just removes any trace of red from the area – Jul 14 '15 at 18:43
Your `#teamspark_box` element has to be after the element that you hover in order for the styles to work see the link – Martin Shishkov Jul 14 '15 at 18:44
Ahh I see, I've nearly got it, I tried making it longer using width 159px but it didn't seem to budge. It's in the correct position and is the suitable thickness but it just needs to cover the entire width of the box which is 159 pixels. Using width apparently doesn't work. – Jul 14 '15 at 18:51
well the way I've done it if you look at the html is that the team speak icon itself is the link, and i've made it it's own separate div so i think that may be the issue. I'm sort of new to html/css and i don't really know how to do it properly. – Jul 14 '15 at 19:05

score 0 · Answer 2 · edited Jul 14 '15 at 18:58

0

In order for the red line to be the width of the grey box and 5px tall, use the css property to set the display of the grey box to block. Thus, for the grey box use:

display:block;
height:5px;

After that you can set other css properties for the links inside the grey box.

edited Jul 14 '15 at 18:58

TNC

5,388
1
26
28

answered Jul 14 '15 at 18:32

frimpong tachie evans

1
1

score 0 · Accepted Answer · answered Jul 14 '15 at 19:05

0

I find your element positioning insane. Try this one

HTML

<a href="ts3server://craft412.serveminecraft.net:9987">
  <div class="teamspeak-box">
    <div class="teamspeak-icon">
      <img src="http://filepic.ru/file/1436899103.png" alt="">
    </div>
    <p>TEAMSPEAK</p>
  </div>
</a>

CSS

.teamspeak-box{
  width: 159px;
  height: 43px;
  background: #212121;
  border-radius: 0px 0px 5px 5px;
  overflow: hidden;
  color: white;
  display: table;
}
.teamspeak-icon{
  width: 43px;
  height: 43px;
  background: #313131;
  display: table-cell;
  transition: all 0.5s ease;
}
.teamspeak-icon img{
  width: 100%;
}
.teamspeak-box p{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.teamspeak-box:hover .teamspeak-icon{
  -webkit-box-shadow: inset 0px -5px 0px 0px rgba(255,0,0,1);
  -moz-box-shadow: inset 0px -5px 0px 0px rgba(255,0,0,1);
  box-shadow: inset 0px -5px 0px 0px rgba(255,0,0,1);
}

Run this code on JSFiddle

answered Jul 14 '15 at 19:05

Cheslab

1,896
2
17
27

Thats very close but I want the red bar to display the entire width of the box, the lighter and darker box. – Jul 14 '15 at 19:07
Right i'll have to study this for a while, but thanks! That appears to be exactly what i'm looking for. – Jul 14 '15 at 19:23
If you find right bottom corner a little buggy - it's because I used inner shadow. But there is another way to make this button, it will require one more div element: https://jsfiddle.net/xb2zupj8/3/ Or if you like the slide animation https://jsfiddle.net/xb2zupj8/4/ – Cheslab Jul 14 '15 at 19:39
Thats great, you've been very helpful. I've never really done this before so It may appear I do things in a strange way. Really I just trial and error things until something works. I don't know the proper way do do it XD. – Jul 14 '15 at 20:37

Div hover function resize css

3 Answers3