Возникла проблема с представлением состояний Hover в CSS - PullRequest
Новая
       24

Возникла проблема с представлением состояний Hover в CSS

0 голосов
/ 13 сентября 2018

Я парень из 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>

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

Я предполагаю, что это было решено, но это также может быть выполнено с помощью простого CSS с использованием комбинатора «~» или присоединения события hover к родителю.

Наведите указатель мыши на родителя (не будет отображаться курсор в виде руки, если вы не укажете) 

.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 один раз.

0 голосов
/ 13 сентября 2018

Ваше .css форматирование кода jQuery неверно, что приводит к ошибке.

В настоящее время вы используете это ... .css("display":"none");

Вместо этого вы должны использовать запятую, а недвоеточие ... .css("display","none");

См. рабочую скрипку.https://jsfiddle.net/joshmoto/3vsk1p09/

Вы можете использовать .hide() и .show() в качестве альтернативы, это аналогично отображению none / block.

...