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

【问题标题】：Having an issue with presentation of Hover states in CSS在 CSS 中显示悬停状态时遇到问题
【发布时间】：2019-02-17 16:36:06
【问题描述】：

我是一名用户体验专家。我让东西看起来漂亮而实用。今晚我的人生短板似乎是在编码，如果我发错了，我深表歉意。

我的问题是，当用户将鼠标悬停在图片(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>

【问题讨论】：

能否请您提供您正在使用的 HTML？

标签： javascript html css hover user-experience

【解决方案1】：

您的.css jQuery 代码格式错误，从而产生错误。

你目前正在使用这个....css("display":"none");

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

见工作小提琴。 https://jsfiddle.net/joshmoto/3vsk1p09/

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

【讨论】：

从技术上讲，您可以保留冒号并将其更改为 .css({"display":"none"});，因为 .css() 函数也支持对象。
当然，或者我猜当时他正在尝试修复他的错误，但从未收到回复，所以不确定它是否解决了问题

【解决方案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。

【讨论】：