將div框上的圖片和文字周圍的灰色填充到灰色

Question

如果用css懸停在div框上，如何在圖像和文本周圍的div框中添加灰色填充？

http://jsfiddle.net/hus​​kydawgs/G3rLu/

    <div id="wrapper-icons">
    <div class="icons_row">
        <div class="icons_cell1">
            <a href="http://www.thesurfboardproject.com/" target="_blank"><img alt="Surfboard" height="140" src="http://www.thesurfboardproject.com/wp-content/uploads/2013/10/JoseAngelGreg-Noll-1010-640x360.jpg" style="display:block; margin:0 auto;" width="160" /> </a>
            <p class="rtecenter"><a href="http://www.thesurfboardproject.com/" target="_blank">Surfboard 1</a></p>
        </div>
        <div class="icons_cell2">
            <a href="http://www.apple.com/" target="_blank"><img alt="Surfboard" height="140" src="http://www.thesurfboardproject.com/wp-content/uploads/2012/07/1957-Hobie-Balsa.jpg" style="display:block; margin:0 auto;" width="160" /> </a>
            <p class="rtecenter"><a href="http://www.apple.com/" target="_blank">Surfboard 2</a></p>
        </div>
        <div class="icons_cell3">
            <a href="http://www.ibm.com/" target="_blank"><img alt="Surfboard" height="140" src="http://www.thesurfboardproject.com/wp-content/uploads/2013/09/Interisland-Gun.jpg" style="display:block; margin:0 auto;" width="160" /> </a>
            <p class="rtecenter"><a href="http://www.ibm.com/" target="_blank">Surfboard 3</a></p>
        </div>
        <div class="icons_cell4">
            <a href="http://www.espn.com/" target="_blank"><img alt="Surfboard" height="140" src="http://previewcf.turbosquid.com/Preview/2010/12/03__01_46_00/Surfboard_V3_2.jpge90d89a5-aaf9-44ac-b8cc-3327a5dc064bLarger.jpg" style="display:block; margin:0 auto;" width="160" /> </a>
            <p class="rtecenter"><a href="http://www.espn.com/" target="_blank">Surfboard 4</a></p>
        </div>
    </div>
</div>

Answer 1

為每個.icons_cell類添加一個：hover。 或者給所有.iconscell（NUMBER）一個相同的類，這樣您只需要編寫一次CSS。

.icons_cell1:hover {
    border: 3px solid grey;
}

Answer 2

快速示例： 此處 。

只需在.class:hover{...}使用.class:hover{...}來顯示邊框。 請記住，如果未設置默認邊框，則由於添加了邊框，圖像會來回跳躍一些，因此請在non-hover子句中添加白色邊框。

Answer 3

將想要附加到任何常規行為的任何元素添加一些常規類。 為了我們的目的，我們將其greyBoxOnHover 。

.greyBoxOnHover:hover {
  border: 3px solid grey;
}

現在，只需將其添加到您想要具有該行為的任何元素中即可。 如...

<div class="icons_cell4 greyBoxOnHover">
   ...
</div>

Answer 4

添加border: 2px solid transparent; 到.icons_cell1, .icons_cell2, .icons_cell3, .icons_cell4 ，然后添加：

.icons_cell1:hover, .icons_cell2:hover, .icons_cell3:hover, .icons_cell4:hover {
    border:2px solid #BBB;
}

如果僅將鼠標懸停在代碼上，則會看到小提琴，當邊框出現時內容就會移動。 為了解決這個問題，我們可以默認在單元格上放置透明邊框。

我還建議其他人提出的建議，並為divs提供兩個類，以便使CSS變小。