Question

我是UX用户。我让事情看起来很漂亮且实用。我今晚的短暂人生似乎正在编码，如果我发布了这个错误，我深表歉意。

我的问题是，当用户将鼠标悬停在图片(background-image)#sthero-client-image上时，它应该隐藏#sthero-whitebar-copy并显示#sthero-whitebar-heros-copy。我正在尝试通过JavaScript进行此操作，因为我要执行其中的三个操作，而且效果不佳。

代码是这里：我又一直在玩它，所以有点时髦。

$(document).ready(function() {
  $("#sthero-client-image").hover(function() {
    $("#sthero-whitebar-copy").css("display": "none");
    $("#sthero-whitebar-client-copy").css("display": "block");
  }, function() {
    // on mouseout, reset the background colour
    $("#sthero-whitebar-copy").css("display": "block");
    $("#sthero-whitebar-client-copy").css("display": "none");
  });
});

.sthero-wrapper{
  height:420px;
  width:1220px;
}
.sthero-whitebar-hide{
  display: block;
}
.sthero-whitebar{
  width:1220px;
  height:100px;
  text-align:center;
  background:rgba(255,255,255,.7);
  position: absolute;
  top: 30%;
  left:1.5%;
  transform: translate(-.75%, -30%);
}
.sthero-whitebar-text-contianer{
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
}
#sthero-whitebar-copy{
  font-family:'exo 2';
  font-size:42px;
  color:#000;
  display:block;
}
#sthero-whitebar-client-copy{
  font-family:'exo 2';
  font-size:42px;
  color:#000;
  display:none;
}
#sthero-whitebar-heros-copy{
  font-family:'exo 2';
  font-size:42px;
  color:#000;
  display:none;
}
#sthero-whitebar-family-copy{
  font-family:'exo 2';
  font-size:42px;
  color:#000;
  display:none;
}
#sthero-client-image{
  background-image: url(clients- 100.jpg);
  background-repeat: no- repeat;
  height:420px;
  width:362px;
  float:left;
}
#sthero-client-image:hover{
  background-image: url(50client-1 00.jpg);
  background-repeat: no- repeat;
  height:420px;
  width:362px;
  float:left;
}
.sthero-heros-image{
  background-image: url(heros- 100.jpg);
  background-repeat: no- repeat;
  height:420px;
  width:450px;
  float:left;
}
.sthero-heros-image:hover{
  background-image: url(50hero- 100.jpg);
  background-repeat: no- repeat;
  height:420px;
  width:450px;
  float:left;
}
.sthero-family-image{
  background-image: url(family- 100.jpg);
  background-repeat: no- repeat;
  height:420px;
  width:408px;
  float:left;
}
.sthero-family-image:hover{
  background-image: url(50family- 100.jpg);
  background-repeat: no- repeat;
  height:420px;
  width:408px;
  float:left; 
}
.sthero-clear{
  clear:both;
}

<div class="sthero-wrapper">
  <div class ="sthero-whitebar"><div class ="sthero-whitebar-text-contianer">
  <div id="sthero-whitebar-copy">
    Who do you want to ship to ? 
  </div>
  <div id="sthero-whitebar-client-copy"> CLIENT'S</div>
  <div id="sthero-whitebar-heros-copy">HERO'S</div>
  <div id="sthero-whitebar-family-copy">FAMILY</div>
  </div></div>
  <div id="sthero-client-image"></div>
  <div class="sthero-heros-image"></div>
  <div class="sthero-family-image"></div>
  <div class ="sthero-clear"></div>
</div>

Answer 1

您的.css jQuery代码格式错误，从而导致错误。

您当前正在使用此... .css("display":"none");

相反，您应该使用逗号而不是冒号... .css("display","none");

请参阅工作提琴。 https://jsfiddle.net/joshmoto/3vsk1p09/

您可以使用.hide()和.show()作为替代，这与不显示/阻止相同。

Answer 2

我认为这已经解决，但是也可以使用同级组合器“〜”或将悬停事件附加到父级，使用纯CSS实现。

将鼠标悬停在父对象上（除非您指定，否则不会显示手形光标）

.sthero-wrapper:hover #sthero-whitebar-copy {
     display:none;
}
.sthero-wrapper:hover #sthero-whitebar-client-copy {
     display:block;
}

同级组合器路由对要定位的项目必须在要引用的项目之后出现。

#sthero-client-image:hover ~ #sthero-whitebar-copy {
     display:none;
}
#sthero-client-image:hover ~ #sthero-whitebar-client-copy {
     display:block;
}

如果您不想多次编写代码，则可以向每个元素添加表示所需内容的类，然后编写一次CSS。

在CSS中显示悬停状态时遇到问题

2 个答案: