Question

这太复杂了吗？希望我的问题或标题是有道理的。基本上我有两个div - 一个是，另一个是。我在每个div中有12个图像，我认为我附加了ID。我仍然非常喜欢网络编码，所以也许我把它们标记错了。但这是我的目标，每当你将鼠标悬停在artwork1上时，artwork1和button1的不透明度应该同时改变。并且效果也需要以另一种方式实现（即悬停：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）一个响应脚本，它将视口重新格式化为查看器的分辨率浏览器大小设置为。

我在文档的顶部加载了jQuery，但是可能与html页面上运行的其他脚本有冲突吗？

我甚至尝试过CSS路线，我几乎无法让div互相交流。我最接近的是当我在按钮div中徘徊时，我可以改变艺术品1，但不像我的目标那样具体。我希望这一切都有意义，并提前感谢阅读所有这些并试图帮助我解决这个巨大的障碍，让我的网站上线。

Answer 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

Answer 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>

列出元素的类时，不要添加＆符号（＆amp;），只需在它们之间留一个空格。

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

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

2 个答案: