在鼠标悬停时更改图像

Question

使用 CSS 您可以使用 :hover 更改背景。你能用 JavaScript 做同样的事情吗？

假设您使用 JavaScript 附加一个 img，并且您希望每次用户将鼠标悬停在该图像上时更改该图像，您可以仅使用 CSS 来实现吗？我都试过了（onmouseover with JS and CSS:hover），但每次“新图像”都卡在用 JavaScript.

创建的 img 后面

有没有办法在旧的上面替换“新 img”？

这是代码

//get api
fetch(api)
  .then(function (res) {
    return res.json();
  })
  .then(function (json) {
    dataFunction(json); 
  });

dataFunction(data){
poster.innerHTML = data.poster
}

每次我将鼠标悬停在图像上时，我想用 CSS 更改背景，但新背景设置在 API 海报的背面

Answer 1

你可以有两个图像标签onhover你可以改变图像的可见性。

.container:hover .second-img {
  visibility: visible;  /*showing second image on hover */
  opacity: 1;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
}

.container {
  position: relative;
  height: 300px;
  width: 257px;
}

.second-img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s, visibility .3s;
}

.container:hover .second-img {
  visibility: visible;
  opacity: 1;
}

<div class="container">
  <img class="first-img" src="https://dummyimage.com/300x300/000/fff&text=hover+me" />
  <img class="second-img" src="https://dummyimage.com/300x300/000/fff&text=hello" />
</div>

Answer 2

如果是背景图片，你可以用css来改变它，比如

.myImageClass:hover {
   background-image: new_image.jpg;
}

或者您可以添加 pseudo-element，例如：

.myClass::after {
   background-image: old_image.jpg;
}
.myClass:hover::after {
   background-image: new_image.jpg;
}

要看你的结构，具体我说不准

至于 Javascript，我无法理解您的代码...您得到一个 JSON 对象作为服务器响应，所以 data.poster 值可能不正确html 代码。或者，对于我来说，最好只是获得带有图像源地址的平面文本，然后将其插入您的 img.src 属性:

poster.src = data.imageSrc;

并验证 and/or 更改您的 z-index，这可能是在之前的图像背面显示新图像的原因。

Answer 3

至少有两种方法可以解决这个问题。第一个纯 css 和第二个纯 javascript。让我们看一下第一个，您从 api 中提取了 data.poster，然后将其作为您命名为 poster 的对象的 innerHtml 属性插入。我不知道你的 api 是什么，而是将图像直接插入 html，你可以了解如何将其插入 style 标签。让我解释一下！我想你的 data.poster 可能看起来像

data.poster = '<img src="image_url"/>'

如果您创建了 api，那么您可以这样更改它：

data.poster = '<div class="image_on_hover">...</div><style> .image_on_hover{background-image: url("first_url");} .image_on_hover:hover{background-image: url("second_url");} </style>'

然后像上面的代码一样插入它。请注意，我只是使用 css 属性来更改背景，这只需要在您的 api 中稍微更改一下。这种方式不太好，因为您让您的代码插入某个可能有害的标签（也许有人恶意更改您的标签 script）。如果您从 api 获得的图像在每次加载页面时都没有改变，您可以在 style 中硬编码而不是使用 api，就像我在之前的示例中所做的一样，但是硬编码在 style.css 文件中。第二种方法是使用 javascript 来做同样的事情。对于这种方法，您的 api 最好只向您发送这些图像的 url。

data.poster = {image1: url_of_image_one, image2: url_of_image_two}

那么你的代码一定是这样的

//get api
fetch(api)
  .then(function (res) {
    return res.json();
  })
  .then(function (json) {
    dataFunction(json); 
  });

dataFunction(data){
poster.classNames.add('image_on_hover')
poster.innerHTML += 'data.poster = '<div class="image_on_hover">...</div><style> .image_on_hover{background-image: url("first_url");} .image_on_hover:hover{background-image: url("second_url");} </style>'
}

还有许多其他方法可以解决这个问题，但一般的想法是使用相同的属性来更改图像，例如，如果您已经在使用某种 js 框架，例如 Vue 你可以在 <img> 标签的 src 中更改它，

new Vue({
  el: '#vue-app',
  data:{
    image_url: '',
    first_url: '',
    second_url: '',
  },
  methods:{
    hoverOut(){
      if (this.first_url!=='')
        this.image_url = this.first_url;
    },
    hoverIn(){
      if (this.second_url!=='')
        this.image_url = this.second_url;
    },
    fetchData(){
      let that = this;
      fetch(api).then(res=>{
        that.first_url = res.poster.image1;
        that.second_url = res.poster.image2;
      })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="vue-app">
<img :src="image_url" @mouseHover="hoverIn" @mouseout="hoverOut"/>
</div>

您还可以在

中看到此 event 解决方案

在鼠标悬停时更改图像

change img on mouse hover

html

javascript

css

image

hover

有没有办法在旧的上面替换“新 img”？