Question

我是CSS的新手，我想知道如何在悬停时将一个按钮放在一个对象的顶部。在徘徊之前，我有这个：

input[name=uh]~a:before {
    display:block;
    position: absolute;
    top: 30px;
    right: 0;
    color:black;
    z-index: 1;
    border: solid 1px #5F99CF;
    border-right:none;
    text-align: center;
    margin-left: -1px;
    padding: 10px 0;
    background-image: url(%%Black%%);
    border-top: none;
    border-right: none;
    -moz-border-radius-bottomleft: 7px;
    border-bottom-left-radius: 7px;
    -webkit-border-bottom-left-radius: 7px;
    -webkit-transition: width 1s, height 1s; /* Safari */
    transition: width 1s, height 1s;
    width: 100%;
    height: 66px;
}

当我将它悬停时，我希望在顶部有一个图像（在＆＃34; background-image属性下面的代码上），并且当点击它时链接。但是，我不知道该怎么做。我目前有这个：悬停。任何帮助都会很棒，谢谢！

input[name=uh]~a:hover:before {
    display:block;
    position: absolute;
    top: 30px;
    right: 0;
    z-index: 1;
    border: solid 1px #5F99CF;
    border-right:none;
    font-size:15px;
    line-height:15px;
    color:#999;
    text-align: center;
    margin-left: -1px;
    padding: 10px 0;
    border-top: none;
    border-right: none;
    background-image: url(%%Battlecats-Menu%%),url(%%subredditrulesbutton%%),url(%%editflairbutton%%),url(%%eventdatabutton%%);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 500px 300px, 500px 60px, 50px 60px ;
    -moz-border-radius-bottomleft: 7px;
    border-bottom-left-radius: 7px;
    -webkit-border-bottom-left-radius: 7px;
    content: "No more battle cats until you finish your homework!";
    background-color: #00ff00;
    color:white;
    text-decoration: none!important;
    width: 500px;
    height: 280px;
}

Answer 1

以下是我为您创建的简单css代码。我已将鼠标悬停添加到对象和按钮的父元素。

我希望这会对你有所帮助:)。

＆＃13;

.button{ display: none; }
.object-inner:hover > .button{ display: inline-block; }

＆＃13;

 <div class="object-inner">
   <a href="" class="button">Click</a>
   <div class="object">
     I'm an object!
   </div>
</div>

＆＃13;

CSS在悬停时添加按钮

1 个答案: