Question

我有一个图像，bg，在页脚上方使用CSS嵌入div中。这个想法是当鼠标向左或向右移动时，图像随之移动。上面/ body的Javascript是导致它工作的原因。它运行良好，但导航链接现在无法点击，内容div是不透明的，你可以通过它们看到bg图像。当我删除#bg div时，一切正常。任何想法如何解决它？ HTML和CSS如下。我从这里的教程得到了这个：panning。

<!DOCTYPE HTML>
<html>
<head>
    <title>portfolio</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <link rel="shortcut icon" href="img/favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/web.css">
    <script src="js/modernizr.custom.js"></script>
    <script src="js/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div id="site">
    <header>
        <nav>
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><img src="img/lightning.png" alt="lightning" width="10" height="16"></li>
                <li><a href="portfolio.html">PORTFOLIO</a></li>
                <li><img src="img/lightning.png" alt="lightning" width="10" height="16"></li>
                <li><a href="code.html">CODE</a></li>
                <li><img src="img/lightning.png" alt="lightning" width="10" height="16"></li>
                <li><a href="contact.html">CONTACT</a></li>
            </ul>
        </nav>
    </header>
    <div id="left_col1">
        <a href="../photo_collection_blom/index.html" target="blank"><img src="img/10.png" alt="image" width="280"
                                                                          height="170" class="fade"></a>

        <p>lorem ipsum</p>
    </div>
    <div id="mid_col1">
        <a href="../non_profit/index.html" target="blank"><img src="img/vpf.png" alt="image" width="280" height="170"
                                                               class="fade"></a>

        <p>lorem ipsum</p>
    </div>
    <div id="right_col1">
        <a href="../cd/index.html" target="blank"><img src="img/cd.png" alt="image" width="280" height="170"
                                                       class="fade"></a>

        <p>lorem ipsum</p>
    </div>
    <div class="clearfix"></div>
    <div id="left_col2">
        <a href="../zen/zen.html" target="blank"><img src="img/zen.png" alt="image" width="280" height="170"></a>

        <p>lorem ipsum</p>
    </div>
    <div id="mid_col2">
        <a href="../practicum/index.html" target="blank"><img src="img/practicum.png" alt="image" width="280"
                                                              height="170"></a>

        <p>lorem ipsum</p>
    </div>
    <div id="right_col2">
        <a href="../dropdown_nav/index.html" target="blank"><img src="img/navs.png" alt="image" width="280"
                                                                 height="170"></a>

        <p>lorem ipsum</p>
    </div>
    <div class="clearfix"></div>
    <div id="left_col3">
        <a href="http://centralpaintstore.com" target="blank"><img src="img/cps.png" alt="image" width="280"
                                                                   height="170"></a>

        <p>lorem ipsum</p>
    </div>
    <div id="mid_col3">
        <img src="img/88.png" alt="image" width="280" height="170">

        <p>lorem ipsum</p>
    </div>
    <div id="right_col3">
        <img src="img/99.png" alt="image" width="280" height="170">

        <p>lorem ipsum</p>
    </div>
    <div class="clearfix"></div>
    <div id="bg"></div>
    <footer>
        <p>lorem ipsum</p>
    </footer>
</div>
<!-- close site -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
<script>
    $(document).ready(function () {
        $('#bg').mousemove(function (e) {
            var mousePos = (e.pageX / $(window).width()) * 100;
            $('#bg').css('backgroundPosition', mousePos + '% 0');
        });
    });
</script>
</body>
</html>

CSS：

* {
    text-decoration:none;
    font-family:Helvetica, sans-serif;
    z-index:100;
}

html {
    background:url(../img/background.gif);
    height:100%;
}

body {
    height:100%;
    z-index:100;
}

#site {
    width:1200px;
    min-height:100%;
    margin:auto;
    position:relative;
    z-index:100;
}

header {
    background:url(../img/background_design.jpg);
    height:63px;
    padding-top:25px;
    z-index:100;
}

nav {
    width:500px;
    padding:10px;
    margin:auto;
    font-family:helvetica, arial, sans-serif;
    font-size:1.2em;
    color:#dcd8cf;
    z-index:100;
}

nav ul {
    word-spacing:20px;
}

li {
    display:inline;
    margin:auto;
}

a:link {
    color:#dcd8cf;
}
/* unvisited link */
a:visited {
    color:#e25d33;
}
/* visited link */
a:hover {
    color:#e25d33;
}
/* mouse over link */
a:active {
    color:#e25d33;
}
/* selected link */

p {
    font-family:Arial, Helvetica, sans-serif;
    color:#000;
    line-height:1.2em;
    margin:10px 5px 20px 5px;
}

#site p a:link {
    color:#ed1b24;
}
#site p a:visited {
    color:#ed1b24;
}
#site p a:hover {
    text-decoration:underline;
}
#site p a:active {
    color:#ed1b24;
}

h3 {
    font-family:helvetica, arial, sans-serif;
    font-size:1.5em;
    color:#000;
    margin:20px;
}

#bg {
    background:url(../img/boston_skyline4.png) no-repeat 0 0 scroll;
    height:auto;
    left:0;
    min-height:100%;
    min-width:1024px;
    overflow:hidden;
    position:fixed;
    top:0;
    width:100%;
    z-index:1;
}

#left_col1, #left_col2, #left_col3 {
    border:1px solid #e0dfdf;
    width:280px;
    height:384px;
    margin-left:120px;
    margin-right:20px;
    background:white;
    padding:10px;
    overflow-x:scroll;
    float:left;
    z-index:100;
}

.clearfix {
    height:20px;
    clear:both;
}

#mid_col1, #mid_col2, #mid_col3 {
    border:1px solid #e0dfdf;
    width:280px;
    height:384px;
    margin-right:20px;
    background:white;
    padding:10px;
    overflow-x:scroll;
    float:left;
    z-index:100;
}

#right_col1, #right_col2, #right_col3 {
    border:1px solid #e0dfdf;
    width:280px;
    height:384px;
    background:white;
    padding:10px;
    overflow-x:scroll;
    float:left;
    z-index:100;
}

#left_col1, #mid_col1, #right_col1 {
    margin-top:20px;
}

#left_col3, #mid_col3, #right_col3 {
    margin-bottom:20px;
}

footer {
    background:url(../img/footer.gif);
    margin:auto;
    position:absolute;
    bottom:0;
    width:1200px;
    height:55px;
}

footer p {
    font-family:helvetica, arial, sans-serif;
    color:#e0dfdf;
    font-size:.9em;
    margin:auto;
    padding-top:1.5em;
    padding-left:1.5em;
}

Answer 1

<div id="bg">标记位于<div id="body"包装中的所有其他标记之上。 Z-index不适用于浮动列，因此您必须将列包装在另一个div中，或将<div id="bg">标记移到<div id="body"标记之外。

这是第一个解决方案的小提琴：http://jsfiddle.net/hjeAT/3/

第二个：http://jsfiddle.net/hjeAT/4/

Answer 2

我认为<div id="bg">的z-index在运行时发生了变化。当导航链接不可点击时，您应该检查z-index。可能你可以在你的javascript中更改z-index。我有另一个建议，你最好删除*选择器的css中的z-index，如下所示

* {
    text-decoration:none;
    font-family:Helvetica, sans-serif;
    z-index:100;
}

Answer 3

这是一个解决方案：

只需删除<div id="bg"></div>和

即可

CSS：

body {
    height:100%;
    background:url(../img/boston_skyline4.jpg) no-repeat 0 0 scroll;
}

脚本：

您可以更改mousemove事件目标。

<script>
    $(document).ready(function () {
        $('body').mousemove(function (e) {
            var mousePos = (e.pageX / $(window).width()) * 100;
            $('body').css('backgroundPosition', mousePos + '% 0');
        });
    });
</script>

javascript图像泛'阻止'导航链接并使div元素不透明

3 个答案:

CSS：

脚本：