DIV周圍沒有邊界

Question

我希望能夠在懸停時將一個圖像淡入另一個圖像，然后在鼠標離開對象時淡出懸停的圖像。 因為它緊緊包裝在DIV中我不想要它周圍的任何空間，所以試圖使用只是SPAN，這是無效的。 任何想法？ 我的腳本如下：

<style>
.fade {
          position: relative;
    border: 0;
    margin: 0 auto;
    padding: 0;
        }

        .fade div {
          position: absolute;
          top: 0;
          left: 0;
          display: none;
          height: 100px;
          width: 240px;
    border: 0;
    margin: 0 auto;
    padding: 0;
        }
-->
</style>

    <script type="text/javascript">
    <!--

    $(function () {
        // find the div.fade elements and hook the hover event
        $('span.fade').hover(function() {
            // on hovering over find the element we want to fade *up*
            var fade = $('> div', this);

            // if the element is currently being animated (to fadeOut)...
            if (fade.is(':animated')) {
                // ...stop the current animation, and fade it to 1 from current position
                fade.stop().fadeTo(250, 1);
            } else {
                fade.fadeIn(250);
            }
        }, function () {
            var fade = $('> div', this);
            if (fade.is(':animated')) {
                fade.stop().fadeTo(3000, 0);
            } else {
                fade.fadeOut(3000);
            }
        });
    });

    //-->
    </script>

HTML：

<span class="fade">
        <img src="theImages/sApproveBW.jpg" alt="Who we are" />
        <div>
            <img src="theImages/sApprove.jpg" alt="Who we are" />
        </div>
    </span><img src="theImages/bApprove.jpg" height=100 width=240 /><br><img src="theImages/tApprove.jpg" height=100 width=240 />

我在第一張圖片下方有一個小空白區域。 無論如何要擺脫它？

看起來如何： http ： //img805.imageshack.us/img805/7417/imgct.png

我想擺脫綠色圖像頂部第一個圖像之間的空白區域。

我的新HTML頁面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Fade Method 1 (two images)</title>
    <style type="text/css" media="screen">
    <!--
* {
    margin: 0;
    padding: 0;
}
        img { border: 0;
display: block;
}

.fade {
    position: absolute
        }

        .fade div {
          position: absolute;
          top: 0;
          left: 0;
          display: none;
          height: 100px;
          width: 240px;
        }

    -->
    </style>

<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>


    <script type="text/javascript">
    <!--

    $(function () {
        // find the div.fade elements and hook the hover event
        $('span.fade').hover(function() {
            // on hovering over find the element we want to fade *up*
            var fade = $('> div', this);

            // if the element is currently being animated (to fadeOut)...
            if (fade.is(':animated')) {
                // ...stop the current animation, and fade it to 1 from current position
                fade.stop().fadeTo(250, 1);
            } else {
                fade.fadeIn(250);
            }
        }, function () {
            var fade = $('> div', this);
            if (fade.is(':animated')) {
                fade.stop().fadeTo(3000, 0);
            } else {
                fade.fadeOut(3000);
            }
        });
    });

    //-->
    </script>
</head>
<body id="page">
    <span class="fade">
        <img src="theImages/sApproveBW.jpg" alt="Who we are" />
        <div>
            <img src="theImages/sApprove.jpg" alt="Who we are" />
        </div>
    </span>
<img class=t src="theImages/bApprove.jpg" height=100 width=240 />
<img class=t src="theImages/tApprove.jpg" height=100 width=240 />
</body>
</html>

但現在我有兩個圖像，第二個（綠色）在第一個（黑色）下面，第三個（黃色）在黑色下面。 這是一個例子： http ： //img266.imageshack.us/img266/9557/imgdu.png

Answer 1

嘗試添加： display:block每個圖像，它應該工作

我對你的代碼進行了一些編輯，但這里是： http ： //jsfiddle.net/nTCr4/16/

Answer 2

img {
    display:block;
}
.fade div {
    margin-top:-100px !important;
}

刪除top:0px; left:0px; top:0px; left:0px; 並添加上面的代碼，這應該排序。

Answer 3

順便說一下，你的空間和圖像的問題是你的圖像在母元素內自然對齊，以防止你可以使用你的圖像CSS屬性： vertical-align:middle; 這將解決它。 但這是另一個例子：

jsBin演示

您只需要這個HTML：

<div class="fade">
  <img src="" alt="" />  
  <img src="" alt="" />  
</div>

這個CSS：

 div.fade {
    position: relative;
    border: none;
    width:240px;
    height:100px;
}
div.fade img{
    position:absolute;
    top:0px;
    left:0px;
}

和jQ：

  var imgTwo = $('.fade').find('img:eq(1)');
  imgTwo.hide();

  $('.fade').hover(function() {
    imgTwo.stop().fadeTo(300,1);
  },function(){
    imgTwo.stop().fadeTo(3000,0);
  });

DIV周圍沒有邊界

問題描述

3 個解決方案

解決方案1
1 2012-07-16 16:39:40

解決方案2
1 已采納 2012-07-16 16:40:50

解決方案3
1 2012-07-16 17:03:18

jsBin演示

DIV周圍沒有邊界

問題描述

3 個解決方案

解決方案1 1 2012-07-16 16:39:40

解決方案2 1 已采納 2012-07-16 16:40:50

解決方案3 1 2012-07-16 17:03:18

jsBin演示

解決方案1
1 2012-07-16 16:39:40

解決方案2
1 已采納 2012-07-16 16:40:50

解決方案3
1 2012-07-16 17:03:18