无法在页面上定位图像翻转答案

【问题标题】：Cannot position image rollovers on page无法在页面上定位图像翻转
【发布时间】：2014-03-19 22:54:17
【问题描述】：

我是 HTML/CSS 的新手，并且正在学习它，希望将知识转移到我担任编辑的在线报纸上。目前，我正在自己的网站上工作，该网站上有图像翻转。我遇到了翻转工作完美的问题，但我无法左右或上下移动它。对于我添加的每个新翻转，它们只会将一个堆叠在另一个下方，一直到页面的下方。我如何解决这个问题并能够将翻转定位在页面周围，就好像它是正常图片一样。下面是代码。提前致谢。

如果您发现我需要解决的任何其他差异，我将不胜感激。

身体

    <div id="Chasity"> 
    <a href="http://falserealityfilmsabout.tumblr.com/IIASVoiceofChasity"><img src="http://i34.photobucket.com/albums/d141/truevintage101/About%20us/72846ed1-9028-44bd-8671-3b4d7c6f7854_zps5a4e0faf.png"onmouseover="this.src='http://i34.photobucket.com/albums/d141/truevintage101/About%20us/Chasitytitle2_zps8b7679b9.png'" onmouseout="this.src='http://i34.photobucket.com/albums/d141/truevintage101/About%20us/72846ed1-9028-44bd-8671-3b4d7c6f7854_zps5a4e0faf.png'" /></a>

和css

body {
      {block:IfNotDarkLayout}
      width:100%;
      height:100%;
        color: #333;
            color: rgba(0,0,0,.9);
      {/block:IfNotDarkLayout}
      {block:IfDarkLayout}
        color: #fcfcfc;
        color: rgba(255,255,255,.9);
      {/block:IfDarkLayout}
        background: {color:Content Background};
        font-family: "Century Schoolbook", Century, Georgia, serif;
        text-shadow: 0 0 1px {color:Content Background};
    }


.Chasity{
  left:300px;
  top:400px;
  position:fixed;
  padding-top:10px;
  padding-right:50px;

{自定义CSS}

【问题讨论】：

标签： html css image position rollovers

【解决方案1】：

只需使用 div:hover 选择器来更改图像，然后你可以将它移动到任何你想要的地方，看我的例子在这里

html:

<a href="http://google.com">
    <div class="box"></div>
</a>

css:

a{
    display:block;
    padding:0;
    width:200px;
    height:500px;
    margin:auto;
}
.box{
    background:url('http://placekitten.com/200/500');
    display:block;
    height: 100%;
    width:100%;
    margin:auto;
}
.box:hover{
    background:url('http://placekitten.com/200/501');
}

http://jsfiddle.net/KLxUy/

【讨论】：