通过将鼠标悬停在另一个 div 图像上来更改另一个 div 内的另一个图像的不透明度答案

【问题标题】：change the opacity of another image inside of another div by hovering over another div image通过将鼠标悬停在另一个 div 图像上来更改另一个 div 内的另一个图像的不透明度
【发布时间】：2013-03-31 00:23:14
【问题描述】：

这是否太复杂而无法实现？希望我的问题或标题有意义。基本上我有两个 div - 一个是，另一个是。我认为我附加了 ID 的每个 div 中有 12 个图像。我仍然是网络编码的菜鸟，所以也许我把它们贴错了。但这是我的目标，每当您将鼠标悬停在 artifact1 上时，artifact1 和 button1 的不透明度应该同时改变。并且效果也需要通过其他方式来实现（即 hover:button1 应该改变artifact1 的不透明度）。下面是我的代码来进一步解释我的情况：

<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 个图像之间的间距。 graydout 类是为了改变已经存在的悬停效果 - 从不透明度 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) 一个响应脚本，将视口重新格式化为查看者的分辨率浏览器大小设置。

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

我什至尝试过使用 CSS 路线，但我几乎无法让 div 相互交互。我最接近的是当我将鼠标悬停在按钮 div 中时，我可以更改艺术品 1，但没有我想要的那么具体。我希望这一切都有意义，并提前感谢您阅读所有这些内容并尝试帮助我克服这个巨大的障碍，让我的网站正常运行。

【问题讨论】：

如果你可以为这个问题设置一个jsFiddle，那就太好了。
我对网络编码太陌生了，甚至无法理解我在做什么，更不用说 jsFiddle。哈！

标签： javascript jquery css hover

【解决方案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

【讨论】：

感谢您的信息 - 我也会试试这个！
与其使用正则表达式来解析 id，为什么不利用data 属性来声明按钮和艺术品之间的关系呢？检查this fiddle 了解我的意思（由 Xenolithic 的 jsFiddle 构建）。
就像上面尝试过的解决方案一样，我也无法让它工作。我不应该将上面的#artwork 命名为我拥有的指定类，以便我可以链接 button1-artwork1 的不透明度更改吗？按钮2-艺术品2；等等。对不起，我对这一切都很陌生。
嗯.. 我看不出你的 CSS 是如何工作的。您可以查看手动将它们添加到元素是否正在创建您想要的效果。至于您的元素和按钮：<a href="..." id="button1" class="galleryButton"> <a href="..." id="artwork1" class="galleryImage"> 当然，您应该针对要更改样式形式的元素。我将编辑原始帖子。
终于！它还活着！感谢您的大力帮助。我是如此的菜鸟，以至于我没有意识到在运行 jQuery 代码后我需要添加另一个

【解决方案2】：

根据我对您问题的理解，您可以这样做：

$(document).ready(function()
{
    $("#one").hover(function()
    {
        // Changes the opacity of the first image
        // as well as the corresponding link from
        // 1 to 0.3.
        $("#artone").css({ "opacity": "0.3" });
        $(this).css({ "opacity": "0.3" });
    });

    $("#two").hover(function()
    {
        $("#arttwo").css({ "opacity": "0.3" });
        $(this).css({ "opacity": "0.3" });
    });
});

HTML 看起来像这样：

<div id="links">
    <a href="#" id="one">Link one</a>
    <a href="#" id="two">Link two</a>
</div>
<div id="artwork">
    <img src="" id="artone" class="spaced">
    <img src="" id="arttwo" class="spaced">
</div>

一些额外的东西 -

确保您确实将 jQuery 链接到您的页面标题中，我在上面没有看到它：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

这是来自 Google 的 CDN，但您当然可以在本地进行。

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

在列出元素的类时，不要添加与号 (&)，只需在它们之间留一个空格即可。

<a href="#" id="artwork1"><img src="#" class="mainbuttons greydout"></a>

【讨论】：

感谢您的信息 - 我会试一试！
这里有一个Fiddle 来展示它的样子。为了简单起见，我用 div 交换了图像。
我已经加载了 jquery - 从这个来源获得它，格式如下：
我假设“DW”是 DreamWeaver，我不确定 DW 的 WYSIWYG 是否会从 Internet 中提取文件。如果你在本地做所有事情，你可以下载实际的 jQuery .js 文件并链接它src="/path/to/the/file.js"。 $("body").html("Hi!"); 是一个简单的测试，看看它是否正常工作 - 请确保将其包装在 $(document).ready(function() { 中！。
是的，DW 是 Dreamweaver - 仍然在这里学习这片土地的语言。这可能是您在此板上听到的最愚蠢的问题，但是当我运行测试时该功能应该做什么？我没有得到任何回应让我知道它正在工作。