在鼠标悬停时更改img

如何解决在鼠标悬停时更改img

使用CSS可以通过：hover更改背景。您可以使用JavaScript进行同样的操作吗？

假设您在JavaScript中附加了img，并且希望每次用户将鼠标悬停在该图像上时都可以使用CSS来更改该图像吗？我已经尝试过两种方法（使用JS和CSS进行onmouseover：悬停），但是每次“新图像”都卡在使用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海报的背面

解决方法

您可以拥有两个图像标签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>

例如，如果它是背景图像，则可以使用css进行更改，例如

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

或者您可以添加一个伪元素，例如：

.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;

还要验证和/或更改您的z-index，这可能是在前一张图像的背面显示新图像的原因。

至少有两种方法可以解决此问题。第一个纯css和第二个纯javascript。让我们看一下第一个，您已经从data.poster获取了api，然后将其作为您命名为海报的对象的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仅发送这些图像的网址。

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，则可以在src标签的<img>中进行更改，

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>

您还可以在here上看到此event解决方案

在鼠标悬停时更改img

如何解决在鼠标悬停时更改img

是否有办法在旧版本的顶部替换“新版本的img”？

解决方法

相关推荐