Question

我有一个包含一个包含h1的锚标签的部分，h1有一个背景图像，当我将鼠标悬停在h1背景图像上时，位置会改变以模仿一个翻转，但是，翻转也会在h1之外激活到它的权利尝试徘徊在右边，我试图摆脱边缘和填充无济于事。

以下是网站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; } }

Answer 1

您可以将h1嵌套在div中，设置div的宽度以达到预期的效果。

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

css section header在区域外有一个悬停状态

1 个答案: