Question

我正在为我正在进行的项目制作SIMPLE悬停按钮。代码主要是HTML，并没有太多的CSS正在进行。所以，正如你所看到的，我有两个按钮。同样的图像也是如此。只是复制它。如果您想操纵代码使其看起来不那么混乱，请这样做。

我需要帮助的是

我怎么能以块状形式制作我的按钮所以它们都是垂直的，而不是我的代码中的水平？
如何在屏幕上移动它们（例如：顶部：550px左：400px）？我不是在谈论动画，只是简单的HTML坐标移动。

.Button {
    position:relative;
    width:151px;
    height:56px;
    float:left;
    margin-right:5px;
}
.Button img {
    position:absolute;
    left:0;
    -webkit-transition:0.5s ease-in-out;
    -moz-transition:0.5s ease-in-out;
    -o-transition:0.5s ease-in-out;
    transition:0.5s ease-in-out;
}
.Button img.inactive:hover {
    opacity:0; 
}

<center>
    <img style="float:center;" src="http://magniq.webs.com/Tutorials/example.png">
    <div id="home" style="position: absolute; left: 373px; top: 35px; width: 385px; height: 485px; overflow: auto;">
        <iframe src="http://magniq.webs.com/Tutorials/iFrameHome.html" name="inlineframe" border="0" marginwidth="0" marginheight="0" allowtransparency="true" frameborder="0" height="100%" width="100%"></iframe>
    </div>
    <a href="http://fryimvu.altervista.org/TransitioningImageTutorial.html" target="inlineframe">
        <div id="ButtonA" class="Button">
            <img class="active" src="http://s30.postimg.org/bkqtapxx9/home1.png" />
            <img class="inactive" src="http://s27.postimg.org/rdats3xz3/home.png" />
        </div>
    </a>
    <a href="http://fryimvu.altervista.org/TransitioningImageTutorial.html" target="inlineframe">
        <div id="ButtonB" class="Button">
            <img class="active" src="http://s30.postimg.org/bkqtapxx9/home1.png" />
            <img class="inactive" src="http://s27.postimg.org/rdats3xz3/home.png" />
        </div>
    </a>
</center>

P.S。我更喜欢我的iFrame像iFrame一样。

Answer 1

1。我怎样才能以块形式制作我的按钮，以便它们在我的代码中垂直而不是水平？

只需将display: block添加到.Button

即可

display: block将元素显示为<p>
等块元素

查看http://www.w3schools.com/cssref/pr_class_display.asp

2。如何在屏幕上移动它们（例如：顶部：550px左：400px）？

只需将position: absolute添加到.Button

即可

位置为绝对的元素;是相对于最近的祖先（而不是相对于视口，像固定一样）。 top，right，bottom和left属性用于定位元素。

如果您希望两个按钮一起移动，请在其周围添加包装并在其中使用position: absolute并使用top，right，bottom和{{1定位它。

如果您希望相对于屏幕的位置使用left而不是position: fixed

位置：固定的元素;是相对于视口，这意味着它总是停留在同一个地方，即使它页面滚动

查看http://www.w3schools.com/css/css_positioning.asp

Answer 2

我认为你要求用你的图像和按钮做这样的事情：

http://jsfiddle.net/k8nn83g9/9/

/**use this to position your button**/
#move{position: absolute; top: 50px; left: 50px;}

/**set background image**/
.Button{background-image: url("http://lorempixel.com/400/200/sports/");background-repeat: no-repeat;}

/**fade image out to see other image**/
.Button img {

-webkit-transition:0.5s ease-in-out;
-moz-transition:0.5s ease-in-out;
-o-transition:0.5s ease-in-out;
transition:0.5s ease-in-out;
}

.Button img.active:hover {
opacity:0; 
}

如何设置块格式的简单悬停按钮？

2 个答案: