gpt4 book ai didi

javascript - 通过将鼠标悬停在另一个 div 图像上来更改另一个 div 中另一个图像的不透明度

转载 作者:太空宇宙 更新时间:2023-11-03 18:48:18 25 4
gpt4 key购买 nike

实现起来太复杂了吗?希望我的问题或标题有意义。基本上我有两个 div-一个是 ,另一个是 。我认为每个 div 内有 12 个图像,我认为我附加了 ID。我仍然是网络编码的菜鸟,所以也许我给它们贴上了错误的标签。但这是我的目标,每当您将鼠标悬停在 artwork1 上时,artwork1 和 button1 的不透明度应该同时改变。效果也需要通过其他方式实现(即 hover:button1 应该改变 artwork1 的不透明度)。下面是我的代码来进一步解释我的案例:

<html> <body> <div id="buttons">

<a href="..." id="button1"><img src="..." class="spaced"(to spaced the buttons)></a>
<a href="..." id="button2"><img src="..." class="spaced"></a>

<div id="artwork">

<a href="..." id="artwork1"><img src="..." class="mainbuttons & greydout"</a>
<a href="..." id="artwork2"><img src="..." class="mainbuttons & greydout"></a>

'mainbuttons' 类用于 12 个图像之间的间距。而 greydout 类是改变已经存在的悬停效果——从不透明度 0.3 到 1。我试图研究一些 javascript,因为我认为这是最合适的解决方案。我尝试使用的 javascript 如下:

$(document).ready(function() {

$("#button1").mouseenter(function(){
$("#artwork1").addClass("opac_art");
});

$("#button1").mouseleave(function(){
$("#artwork1").removeClass("opac_art");
$("#artwork1").addClass("greydout")
});
});

还需要考虑的一件事是,我有多个脚本运行用于各种功能:1) 将移动浏览器重定向到移动站点的重定向脚本;2) 一个响应脚本,将视口(viewport)重新格式化为查看者的浏览器分辨率设置的任何值。

我在文档顶部加载了 jQuery,但会不会与 html 页面上运行的其他脚本发生冲突?

我什至尝试过 CSS 路线,但我几乎无法让 div 相互交互。我最接近的是当我将鼠标悬停在按钮 div 中时,我可以更改图稿 1,但没有我想要的那么具体。我希望所有这些都是有道理的,并提前感谢您阅读所有这些内容并试图帮助我克服这个巨大的障碍来启动我的网站。

最佳答案

尝试这样的事情。

将一个类添加到您的按钮 (galleryButtons) 和另一个 div 中的图像。

首先你真的不需要用a标签包装将类添加到您的按钮元素和插图。

<div id="buttons">
<img id="gbutton1" class="galleryButtons" src="button.png" />
<img id="gbutton2" class="galleryButtons" src="button.png" />

<div id="artwork">
<img id="artwork1" class="artworkImage" src="art1.jpg" />
<img id="artwork2" class="artworkImage" src="art2.jpg" />

$(document).ready(function () {
var intID;
$(".galleryButtons").hover(function (e) {
console.log(e.target.id);
var id = e.target.id;
intID = id.replace(/^\D+/g, '');
$("#artwork" + intID).addClass("opac_art");
}, function () {
$("#artwork" + intID).removeClass("opac_art").addClass("greydout");

});
$(".artworkImage").hover(function (e) {
var id = e.target.id;
intID = id.replace(/^\D+/g, '');
$("#gbutton" + intID).addClass("opac_art");
}, function () {
$("#gbutton" + intID).removeClass("opac_art").addClass("greydout");

});
});

全部为您服务:http://jsfiddle.net/djwave28/et6tD/4/

选择更智能可以使它变得更简单,但我希望你能更好地看到元素中的关系。当您将鼠标悬停在一个元素上时,导致事件的元素将发送到该函数。此事件包含信息。就像 e.target.id 将保存该元素的 ID。 http://www.w3schools.com/jsref/dom_obj_event.asp

关于javascript - 通过将鼠标悬停在另一个 div 图像上来更改另一个 div 中另一个图像的不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15716050/

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