單線懸停的CSS網格

我在http://jsfiddle.net/TsRJy/上創建了一個帶有div框的網格。單線懸停的CSS網格

問題

我不知道如何使一個：懸停工作。

爲表不是我的選擇信息

重寫的HTML代碼。
http://www.normann-copenhagen.com/Products繼承此問題。
我比較喜歡CSS之前的Javascript。

HTML（萬一的jsfiddle不工作）

<div class="container"> 
    <div class="grid"> 
     <div class="item"> 
      <a href="#"> 
      </a> 
     </div> 
     <div class="item"> 
      <a href="#"> 
      </a> 
     </div> 
     <div class="item"> 
      <a href="#"> 
      </a> 
     </div> 
     <div class="item"> 
      <a href="#"> 
      </a> 
     </div> 
     <div class="item"> 
      <a href="#"> 
      </a> 
     </div> 
     <div class="item"> 
      <a href="#"> 
      </a> 
     </div> 
     <div class="item"> 
      <a href="#"> 
      </a> 
     </div> 
    </div> 
</div>

CSS

.container { 
    margin: 0 auto; 
    width: 500px; 
} 

.item { 
    border: 1px solid #ccc; 
    float: left; 
    margin: 0 -1px -1px 0; 
} 

.item a { 
    display: block; 
    height: 100px; 
    width: 100px; 
    background: #f5f5f5; 
} 
.item a:hover { 
    border: 1px solid black; 
}

來源

2012-09-04 Jens Törnell

試試這個，在CSS

.container { 
    margin: 0 auto; 
    width: 500px; 
} 

.item { float: left; } 

.item a { 
    display: block; 
    height: 99px; 
    width: 99px; 
    background: #f5f5f5; 
    border: solid 1px #d6d6d6; 
    border-width: 0 1px 1px 0; 
} 

.item a:hover { 
    border: solid 1px #f00; 
    margin: -1px 0 0 -1px; 
}

http://jsfiddle.net/GtR3P/

只是微小的變化

更精確的結果，試試這個也希望這個解決您的問題

.container { 
    margin: 0 auto; 
    width: 506px; 
} 

.item { float: left; } 

.item a { 
    display: block; 
    height: 100px; 
    width: 100px; 
    background: #f5f5f5; 
    border: solid 1px #d6d6d6; 
    border-width: 0 1px 1px 0; 
} 

.item a:hover { 
    border: solid 1px #f00; 
    margin: -1px 0 0 -1px; 
} 

.grid .item:nth-child(5n+1) a { border-left-width:1px; } 

.grid .item:nth-child(5n+1) a:hover { margin:-1px 0 0 0; }

來源

2012-09-04 08:49:33

關閉但缺少幾行。 –

編輯中的CSS幾乎是完美的......只有一條線缺失，頂線。 –

http://jsfiddle.net/W4NNd/ 檢查這一個 –

可以使用箱大小屬性用於此。像這樣寫：

.item a:hover { 
    border: 1px solid black; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box; 
}

入住這http://jsfiddle.net/TsRJy/1/

來源

2012-09-04 06:28:06 sandeep

+1在這種情況下使用'箱sizing'。 –

既然你已經把邊界，懸停效果不能正常工作。

.item a:hover { 
    box-shadow: 2px 2px 2px #333; 
    background-color:Teal 
}

看這個fiddle

另外這裏是一個有用的link

來源

2012-09-04 06:33:38 Paras

也是另一種的路要走，這是設置邊框顏色相同的顏色作爲框的背景顏色，將其更改爲黑色懸停：

.item a { 
    display: block; 
    height: 100px; 
    width: 100px; 
    background: #f5f5f5; 
    border: 1px solid #f5f5f5; 
} 
.item a:hover { 
    border-color: black; 
}

演示：http://jsfiddle.net/TrXT9/1/

來源

2012-09-04 06:38:49 kostaspt

我看到你的包裝寬度爲500px。如果製作寬度爲100px，邊距爲1px，邊距爲-1px的div，則div仍爲101px。

box-sizing:border-box是解決這一問題的一個美麗的方式，但它不是在IE7

支持

如果你想IE7支持，您需要調整您的寬度和高度是這樣的：
http://jsfiddle.net/TsRJy/5/

來源

2012-09-04 06:50:50 Puyol

單線懸停的CSS網格

回答

相關問題