如何在这些按钮悬停时更改这些按钮？

Question

我试图使带有'FORWARDS'文本的区域在悬停时变为纯红色背景，然后将'FULL'区域更改为边框。这可能吗？

#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>

Answer 1

你可以用jQuery做点什么：

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

或者将类添加到项目中：

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

Answer 2

您可以在jQuery.hover中执行功能 或者通过css：hover ...