为什么我的鼠标悬停层不会出现在其他浏览器上？

I've been trying to create a script to show/hide layers with a mouseover. It works for IE but not for Opera or Chrome.

我一直在尝试使用鼠标悬停创建一个显示/隐藏图层的脚本。它适用于IE,但不适用于Opera或Chrome。

Here is the code: `

这是代码:`

    <script type="text/javascript">
        function showFrontLayer() {
            document.getElementById('bg_mask').style.visibility='visible';
            document.getElementById('frontlayer').style.visibility='visible';
        }
        function hideFrontLayer() {
            document.getElementById('bg_mask').style.visibility='hidden';
            document.getElementById('frontlayer').style.visibility='hidden';
        }       
    </script>


<script language="javascript" type="text/javascript">

    function openWin(url) {
        window.open(url);

    }
</script>

<script>
$(document).ready(function()
{   
    $.ajax({
        type: "GET",
        url: "info.xml",
        dataType: "xml",
        success: function(xml) { parseXml(xml); }
    });
});

function parseXml(xml)
{

    $(xml).find("media").each(function()
    {
            $("#output").append($(this).find("title").first().text() + "<br />");
            $("#output").append($(this).find("description").text() + "<br />");
        $("#output").append($(this).find("keywords").text() + "<br />");
    });



    $(xml).find("customDataElement").each(function()
    {
            $("#output").append($(this).find("title").text());
            $("#output").append(": " + $(this).find("value").text() + "<br />");
    });

}
</script>

    <style type="text/css">

    #bg_mask {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        margin-top: 0px;
        width: 981px;
        height: 610px;
        background : url("img_dot_white.jpg") center;
        z-index: 1;
        visibility: hidden;
    } 

#baselayer {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 70px 140px 175px 140px;
        padding : 30px;
        width: 600px;
        height: 400px;
        background-color: red;
        visibility: visible;
        border: 1px solid black;
        z-index: 0;
    } 



    #frontlayer {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0px 140px 175px 0px;
        padding : 30px;
        width: 600px;
        height: 400px;
        background-color: blue;
    color: white;
        visibility: hidden;
        border: 1px solid black;
        z-index: 2;
    } 


    </style>
</head>

<div id="baselayer" onmouseover="showFrontLayer();" onmouseout="hideFrontLayer();">
    <img width="600" height="400" src="graphic.jpg" />


        <div id="bg_mask">
        <div id="frontlayer" onclick="openWin('second_page.html')" >
            <p id="output" ></p><br/><br/><br/>
            <br/><br/><br/>
        </div>
    </div>
</div>

I'm pulling some information from an XML file and trying to display it on a hidden layer behind an image. In IE, the second layer with text shows up, but with Opera or Chrome, only the blue background is visible. What's wrong with my code?

我从XML文件中提取一些信息并尝试将其显示在图像后面的隐藏层上。在IE中,带有文本的第二层显示,但使用Opera或Chrome时,只能看到蓝色背景。我的代码出了什么问题?

Edit: After trying it out with multiple browsers, I noticed only Internet Explorer has given me a prompt: "Internet Explorer restricted this webpage from running scripts or ActiveX controls."

编辑:尝试使用多个浏览器后,我注意到只有Internet Explorer给我一个提示:“Internet Explorer限制此网页运行脚本或ActiveX控件。”

I'm thinking the other browsers automatically block my XML script from running. Is there a way I can still extract my data from the XML file without running a script?

我在想其他浏览器会自动阻止我的XML脚本运行。有没有办法我可以在不运行脚本的情况下从XML文件中提取数据?

2 个解决方案

#1

No need for any JavaScript here, you can just use the CSS negation pseudo class :not() to set the visibility of the relevant div to hidden when its parent is not being hovered, like so:

这里不需要任何JavaScript,您可以使用CSS否定伪类:not()将相关div的可见性设置为隐藏其父级未被悬停时,如下所示:

#baselayer{
    background:red;
    border:1px solid black;
    bottom:0;
    height:400px;
    left:0;
    margin:70px 140px 175px 140px;
    padding:30px;
    position:absolute;
    right:0;
    top:0;
    width:600px;
}
#bg_mask{
    background:url(img_dot_white.jpg) center;
    bottom:0;
    height:610px;
    left:0;
    margin:0 auto;
    position:absolute;
    right:0;
    top:0;
    width:981px;
}
#baselayer:not(:hover) #bg_mask{
    visibility:hidden;
}
#frontlayer{
    background:blue;
    border:1px solid black;
    bottom:0;
    color:white;
    height:400px;
    left:0;
    margin:0px 140px 175px 0px;
    padding:30px;
    position:absolute;
    right:0;
    top:0;
    width:600px;
}

<div id="baselayer">
    <img width="600" height="400" src="graphic.jpg">
    <div id="bg_mask">
        <div id="frontlayer" onclick="openWin('second_page.html')">
            <p id="output"></p><br><br><br><br><br><br>
        </div>
    </div>
</div>

#2

This ought to be a comment, but unfortunately the space provided doesn't suffice.

这应该是一个评论,但不幸的是,提供的空间是不够的。

function showFrontLayer() {
    $('#bg_mask, #frontlayer').css('visibility', 'visible');
}

function hideFrontLayer() {
    $('#bg_mask, #frontlayer').css('visibility', 'hidden');
}

function openWin(url) {
    window.open(url);
}

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "info.xml",
        dataType: "xml",
        success: function (xml) {
            parseXml(xml);
        }
    });
});

function parseXml(xml) {
    $(xml).find("media").each(function () {
        $("#output").append($(this).find("title").first().text() + "<br />")
        .append($(this).find("description").text() + "<br />")
        .append($(this).find("keywords").text() + "<br />");
    }).find("customDataElement").each(function () {
        $("#output").append($(this).find("title").text())
        .append(": " + $(this).find("value").text() + "<br />");
    });
}

However, this is probably not causing your problem. You can use a simple hover in css to solve this:

但是,这可能不会导致您的问题。您可以在css中使用简单的悬停来解决此问题:

#baselayer:hover #frontlayer {
    visibility: visible;
}

This does exactly the same as your JS did, only in plain CSS.

这与您的JS完全相同,仅在纯CSS中。

Here's an example: http://jsfiddle.net/97k0akxp/

这是一个例子:http://jsfiddle.net/97k0akxp/

#1