Question

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

这是代码： `

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

`

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

编辑：在尝试使用多个浏览器之后，我注意到只有Internet Explorer给了我一个提示：＆＃34; Internet Explorer限制此网页运行脚本或ActiveX控件。＆＃34;

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

Answer 1

此处不需要任何JavaScript，您可以使用CSS否定伪类:not()将相关SELECT N.ID, N.FULL_NAME, N.MEMBER_TYPE, N.JOIN_DATE,DA.BIRTH_DATE, (SELECT CASE WHEN DATEDIFF(YEAR,N.JOIN_DATE,GETDATE()) + 35 > DATEDIFF(YEAR,DA.BIRTH_DATE,GETDATE()) + 65 THEN CONVERT(VARCHAR(4),YEAR(N.JOIN_DATE) + 35) WHEN DATEDIFF(YEAR,N.JOIN_DATE,GETDATE()) + 35 < DATEDIFF(YEAR,DA.BIRTH_DATE,GETDATE()) + 65 THEN CONVERT(VARCHAR(4),YEAR(DA.BIRTH_DATE) + 65) ELSE NULL END) AS 'EMERITUS'的{{1}}设置为在其父级未被悬停时隐藏，像这样：

visibility

div

Answer 2

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

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 />");
    });
}

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

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

这与JS完全相同，只是在纯CSS中。

以下是一个示例：http://jsfiddle.net/97k0akxp/

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

2 个答案: