How do I make these buttons change when they are hovered over?

Question

I am trying to make the area with the 'FORWARDS' text change to a solid red background when it is hovered over, and also then change the 'FULL' area to a border. Is this possible?

#fullTeam {
  background: #c41234;
  height: 50px;
  width: 200px;
  border-radius: 10px 0 0 10px;
  position: relative;
  top: 180px;
  left: 420px;
}

#forwards {
  border: 3px solid #c41234;
  height: 44px;
  width: 200px;
  position: relative;
  top: 130px;
  left: 620px;
}

#backs {
  border: 3px solid #c41234;
  height: 44px;
  width: 200px;
  border-radius: 0 10px 10px 0;
  position: relative;
  top: 80px;
  left: 823px;
}

#fullTeam h1 {
  font-family: "Open Sans", sans-serif;
  color: #ffffff;
  font-size: 20px;
  font-weight: 400;
  position: relative;
  top: 10px;
  left: 80px;
}

#forwards h1 {
  font-family: "Open Sans", sans-serif;
  color: #ffffff;
  font-size: 20px;
  font-weight: 400;
  position: relative;
  bottom: 5px;
  left: 50px;
}

#backs h1 {
  font-family: "Open Sans", sans-serif;
  color: #ffffff;
  font-size: 20px;
  font-weight: 400;
  position: relative;
  bottom: 5px;
  left: 70px;
}

#fullTeam:hover {
  background: #151515;
}

#forwards:hover {
  background: #c41234;
}

#backs:hover {
  background: #c41234;
}

<div id="fullTeam">
  <h1> FULL </h1>
</div>
<div id="forwards">
  <h1> FORWARDS </h1>
</div>
<div id="backs">
  <h1> BACKS </h1>
</div>

@JDB This is not a duplicate of that; OP is using hover correctly here already. — TylerH, Mar 18 '17 at 01:24
@Angus No, you can't do this in CSS; you would need a a previous sibling selector. See http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector In short, you'd need a way to go 'up' the hierarchy chain. This will require JavaScript. — TylerH, Mar 18 '17 at 01:28
@Angus However, if you wanted to do it on click, you could use CSS then, by making these
elements labels, instead, and associate them with a radio button. See https://jsfiddle.net/cgpue74y/ — TylerH, Mar 18 '17 at 01:32
@Angus The simplest thing to do, probably is to remove the default background from 'FULL' and just have it show red on hover. PS - you should probably just say Forward and Back, instead of adding the 's' on the end. — TylerH, Mar 18 '17 at 01:36

score 0 · Answer 1 · answered Mar 17 '17 at 19:20

You could do something like with jQuery:

$('#forwards').hover(function() { 
    $(this).find('h1').css({ 'color': 'red' }); 
    $('#full h1').css({ 'background-color': 'transparent' });
});

OR add classes to the items like:

$('#forwards').hover(function() {
    $(this).find('h1').addClass('thisRed');
    $('#full h1').addClass('thisTrans');
});

score -1 · Answer 2 · answered Mar 17 '17 at 19:33

-1

You can do function in jQuery.hover Or by css:hover...

answered Mar 17 '17 at 19:33

Aouadi Mohamed Ali

1
4

This really doesn't attempt to answer the question... – TylerH Mar 18 '17 at 01:25

How do I make these buttons change when they are hovered over?

elements labels, instead, and associate them with a radio button. See https://jsfiddle.net/cgpue74y/

2 Answers2