新的HTML和CSS，链接正在移动时，悬停超过

Question

我想获得3图像也链接到其他页面，但是当我把鼠标悬停在他们身上，他们跳出来的地方。

任何帮助？

我的CSS看起来像这样为我的第二个媒体查询，我会需要它贯穿始终。

#section_container_bottom figure { 
    width: 100%; 
    margin: 0 auto;  
    } 

#section_container_bottom img { 
    width: 25%; 
    margin: 3%; 
    } 

#section_container_bottom img a:link, a:visited, a:active, a:hover { 
     display: block; 
     } 

这是HTML

<section id="section_container_bottom"> 
    <figure> 
     <a href="javascript:void(0)"><img src="Sources/USE/latest-colors.png" alt="An overview of the latest colors available at Paint Republic"></a> 
     <a href="javascript:void(0)"><img src="Sources/USE/inspiration.png" alt="Some inspiration provided by Paint Republic for you when looking to repaint in your own home"></a> 
     <a href="javascript:void(0)"><img src="Sources/USE/color-expert.png" alt="Contact one of the color experts that are available through Paint Republic"></a> 
     <div class="clear_float"></div> 
    </figure> 
</section> 

我会遇到与显示器的显示问题：块？

Answer 1

请更改代码下面一行在你的CSS

CSS

#section_container_bottom a:link, a:visited, a:active, a:hover { 
    display: inline; 
} 

Answer 2

CSS选择器需要一个逗号后重复。

#section_container_bottom img a:link, 
#section_container_bottom img a:visited, 
#section_container_bottom img a:active, 
#section_container_bottom img a:hover { 
    display: block; 
}