1

这是否太复杂而无法实现？希望我的问题或标题有意义。基本上我有两个 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，但没有我想要的那么具体。我希望这一切都有意义，并提前感谢您阅读所有这些并试图帮助我克服这个巨大的障碍，让我的网站正常运行。

4

2 回答 2

0

尝试这样的事情。

为您的按钮 (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

于 2013-03-30T07:33:47.000 回答
0

根据我对您的问题的理解，您可以执行以下操作：

$(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>

于 2013-03-30T07:35:38.240 回答