如何在悬停时更改图像和文本

Question

我正在尝试在悬停时更改图像和文字，但我有this in codepen但它似乎无法正常工作？

＆＃13;

＆＃13;

$(".service_1").hover(function() {
  $(".hello").hide();

  $(".text").append("<span class='go'>Appended text</span>");
});

＆＃13;

.service_item img {
  position: absolute;
}

.service_item {
  height: 307px;
  width: 700px;
  background-size: cover;
  transition: background-image 0.5s linear;
  -webkit-transition: background-image 0.5s linear;
  float: left;
  position: relative;
}

.service_item:hover {
  transition: background-image 0.5s linear;
  -webkit-transition: background-image 0.5s linear;
}

.serviceimg {
  margin-top: 66px;
  height: 949px;
}

.service_item a {
  height: 50%;
  display: block;
  text-align: center;
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  position: relative;
}

.service_item img {
  position: absolute;
  left: 0px;
  width: 100%;
  height: 300px;
  transition: opacity .5s ease;
}

.service_item img:hover {
  opacity: 0;
}

.service_item span {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="service_item service_1">
  <a href="/uk-marriage-spouse-civil-partner-visa/">
    <img src="http://www.edwards-immigration.co.uk/wp-content/uploads/2017/02/mikhail-pavstyuk-8436.png">
    <img src="http://www.edwards-immigration.co.uk/wp-content/uploads/2017/02/Untitled-1.png">
    <div class="text"><span class="hello">Hello there</span></div>
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;

有人能指出我哪里出错吗？

Answer 1

<a href="#">
<img src="http://www.dummy.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png" 
onmouseover="this.src='http://www.dummy.com/icons/fasticon/angry-birds/128/red-bird-icon.png'"
onmouseout="this.src='http://www.dummy.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png'"
border="0" alt=""/></a>

Answer 2

Css可以处理您要实现的目标。以下是使用css transitions和flex-box来对齐文字的工作示例：

＆＃13;

＆＃13;

.service_item img {
  position: absolute;
  z-index: -1;
}

.service_item {
  height: 307px;
  width: 700px;
  float: left;
  position: relative;
}

.serviceimg {
  margin-top: 66px;
  height: 949px;
}

.service_item a {
  height: 307px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
}

.service_item img {
  position: absolute;
  left: 0px;
  width: 100%;
  height: 300px;
  transition: opacity .5s ease;
}

.service_item:hover img:last-of-type {
  opacity: 0;
}

.service_item:hover .append-text {
  opacity: 1;
}

.append-text {
  opacity: 0;
}

＆＃13;

<div class="service_item service_1">
  <a href="/uk-marriage-spouse-civil-partner-visa/">
    <img src="http://www.edwards-immigration.co.uk/wp-content/uploads/2017/02/mikhail-pavstyuk-8436.png">
    <img src="http://www.edwards-immigration.co.uk/wp-content/uploads/2017/02/Untitled-1.png">
    <div class="hello">Hello there</div>
    <div class="append-text">APPENDED TEXT</div>
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;