css部分标题有一个悬停状态区域

我有一个部分包含一个包含h1的锚点标记，h1有一个背景图像，当我将鼠标悬停在h1背景图像上时，位置变化模仿翻转，但是，翻转也是活跃在h1之外，它试图徘徊在右边，我试图摆脱利润和填充无济于事。css部分标题有一个悬停状态区域

这里是网站live

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Portfolio of Anders Kitson</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <!--[if lt IE 9]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    <link rel="stylesheet" href="css/normalize.css"> 
    <link rel="stylesheet" href="css/styles.css"> 
    <script type="text/javascript" src="//use.typekit.net/lfr7txf.js"></script> 
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script> 
</head> 
<body> 
<div id="container"> 
<header> 
<h1>ASK</h1> 
<h2>Anders Samuel Kitson, front end web developer.</h2> 
</header> 
<section id="siteThumbs"><!--not sure if this is appropriate use of the section tag--> 
<a href="#"><h1>Springmethod.com</h1></a> 
</section> 
</div> 
</body> 
</html>

CSS

/*variables*/ 
/*shared styles*/ 
#container { 
    width: 960px; 
    max-width: 90%; 
    border: solid 0px #000; 
    margin: auto; } 

header h1 { 
    background: url("../images/ask.gif"); 
    width: 97px; 
    height: 96px; 
    text-indent: -9000px; } 
header h2 { 
    font-family: "brandon-grotesque",sans-serif; 
    font-weight: 300; 
    font-size: 2.5em; } 

#siteThumbs h1 { 
    background: url("../images/springmethod.jpg"); 
    width: 321px; 
    height: 241px; 
    text-indent: -9000px; 
    padding: 0; 
    margin: 0; } 

#siteThumbs a:hover h1 { 
    background: url("../images/springmethod.jpg") 0 -241px no-repeat; } 

/*media queries*/ 
/* Smartphones (portrait and landscape) */ 
@media only screen and (min-width: 0px) and (max-width: 767px) { 
    header h2 { 
    font-size: 1.5em; } }

来源

2012-11-24 Cool Guy Yo

可以嵌套h1一个div内，设置div的宽度来实现d预期的效果。

<a href="#"> 
    <div style="width: 100px"> 
     <h1>Springmethod.com</h1> 
    </div> 
</a>

来源

2012-11-24 06:31:01 Milind

你是说我应该把锚标签放在div的周围，并且在里面有h1标签，这对我没有意义，但我可能会误解。 –

nvm，我明白了，你的意思是把一个div封装起来，给这个div一个宽度，效果很好，谢谢！ –

css部分标题有一个悬停状态区域

回答

相关问题