TL; DR

Question

我需要它才能成为一个javascript解决方案。请参阅 this demo 。

目标是将光点悬停在右下角并相应地交换图像。但它现在做的是在悬停时显示一个空白页面，整个ul变为垂直并转到左上角。我在这做错了什么???

HTML：

<div id="wrapper">  
        <section id="contentWrapper">   
                <div id="resistorContent" class="content">
                    <section id="resistorDetail1"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic1.jpg"></section>
                    <section id="resistorDetail2"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic2.jpg"></section>
                    <section id="resistorDetail3"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic3.jpg"></section>
                    <section id="resistorDetail4"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic4.jpg"></section>
                    <ul>
                        <li onMouseOver="showDetail(resistorDetail1)"></li>
                        <li onMouseOver="showDetail(resistorDetail2)"></li>
                        <li onMouseOver="showDetail(resistorDetail3)"></li>
                        <li onMouseOver="showDetail(resistorDetail4)"></li>
                    </ul>
                </div>
        </section>
    </div>

JAVASCRIPT：

<script type="text/javascript">
                    var children = document.querySelectorAll('.content > section[id]')
                    function showDetail(target){
                        for (var i = 0, child; child = children[i]; i++) {
                        child.style.display = 'none';
                        }
                    document.getElementById(target).style.display = 'block';
                    }
                </script>

可能收集CSS？：

.content section:not(:first-child) {
    display: none;
}

提前谢谢!!

Answer 1

TL; DR

这是工作小提琴：https://jsfiddle.net/2qz2srqs/3/

的原因

您的代码非常接近，但它有一些小问题。

第一个是复制粘贴错误，您有两个ID为resistorDetail3的元素。

其次，onmouseover事件的语法不正确。使用javascript:添加任何javascript并确保其具有正确的语法。

第三，您的showDetail方法需要显示元素的字符串id。在onmouseover声明中，您有showDetail(resistorDetail1)而不是showDetail('resistorDetail1')。

最后，当你在HTML中引用javascript时，你需要确保首先加载javascript。只需查看开发人员的控制台，您就可以通过错误"showDetail is not defined.看到它。我将其切换到No wrap - in <body>并且工作正常。

但是我强烈建议不要直接引用HTML中的javascript。相反，首先加载HTML然后使用javascript的DOM ready事件绑定您的事件。这将增加您的加载时间，并在需要时更容易切换到jQuery / Zepto之类的东西。

完整代码

HTML

<section id="contentWrapper">
    <div id="resistorContent" class="content">
        <section id="resistorDetail1">
            <img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic1.jpg" />
        </section>
        <section id="resistorDetail2">
            <img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic2.jpg" />
        </section>
        <section id="resistorDetail3">
            <img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic3.jpg" />
        </section>
        <section id="resistorDetail4">
            <img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic4.jpg" />
        </section>
        <ul>
            <li onmouseover="javascript: showDetail('resistorDetail1')"></li>
            <li onmouseover="javascript: showDetail('resistorDetail2')"></li>
            <li onmouseover="javascript: showDetail('resistorDetail3')"></li>
            <li onmouseover="javascript: showDetail('resistorDetail4')"></li>
        </ul>
    </div>
</section>

JS

var children = document.querySelectorAll('.content > section[id]');

function showDetail(target) {
    for (var i = 0, child; child = children[i]; i++) {
        child.style.display = 'none';
    }
    document.getElementById(target).style.display = 'block';
}

CSS

(unchanged)

Answer 2

这是另一个工作小提琴。

https://jsfiddle.net/2qz2srqs/4/

这个问题有几件事。

您将未定义的变量传递到onmouseover属性中。你想要字符串（我引用它们）
在JSFiddle中，您不会自动获取窗口范围，因此如果您希望能够使用事件属性命中它，则必须将函数指定为窗口的属性。

通过悬停ul li来切换图片

2 个答案:

TL; DR

的原因

完整代码

HTML

JS

CSS