gpt4 book ai didi

Javascript onmouseover 背景图像更改

转载 作者:行者123 更新时间:2023-11-30 14:13:59 26 4
gpt4 key购买 nike

我正在尝试将此背景更改器从 编辑后删除 实现到我的个人博客,该博客仅驻留在我的计算机上(未上传到互联网),但我不知道 js 是什么因为它是?我将如何将它添加到我的博客中?我知道有:

<body style="background-image : url();"> 

在 html 文件后面跟着:

<img src="" onmouseover="document.body.style.backgroundImage = 'url()';" width="20" height="20"> 

除了js还有别的吗?

编辑:这似乎只适用于 12x12 的 gif 图像?当我将自己的图片放入 url 位置时,bg 更改将不起作用。

第二次编辑:我发现了问题。我的 imgs 没有正确命名。

最佳答案

这是在 div 背景上的两个图像之间切换的东西。

let images = ['https://www.gstatic.com/webp/gallery/3.jpg','https://www.gstatic.com/webp/gallery/1.jpg'];
var currentImage = 1;

let myDiv = document.getElementById("myBackground");
myDiv.addEventListener('mouseover', function(event) {
currentImage = currentImage == 0 ? 1 : 0;
event.target.style.backgroundImage = `url('${images[currentImage]}')`;
});
#myBackground {
background-image: url('https://www.gstatic.com/webp/gallery/1.jpg');
height: 300px;
width: 300px;
border: 2px; solid red;
}
<div id="myBackground"></div>

这是一个仅使用 CSS 的版本,但仅限于鼠标悬停,在您离开元素时重置。

    #myBackground {
background-image: url('https://www.gstatic.com/webp/gallery/1.jpg');
height: 300px;
width: 300px;
border: 2px; solid red;
}

#myBackground:hover {
background-image: url('https://www.gstatic.com/webp/gallery/2.jpg');
}
<div id="myBackground"></div>

这是一个在鼠标悬停时向 CSS 添加类的版本。

let myDiv = document.getElementById("myBackground");
myDiv.addEventListener('mouseover', function(event) {
event.target.classList.add('myOverride');
});
        #myBackground {
background-image: url('https://www.gstatic.com/webp/gallery/1.jpg');
height: 300px;
width: 300px;
border: 2px; solid red;
}

#myBackground.myOverride {
background-image: url('https://www.gstatic.com/webp/gallery/2.jpg');
}
<div id="myBackground"></div>

关于Javascript onmouseover 背景图像更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53908809/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com