Question

我遇到问题，让这个按钮停留在浮动在我网站内容之上的按钮架上。我如何添加一个下拉菜单，并将其保存在同一个按钮架中。

.btn-holder {
background: rgba(255, 255, 255, 0.5);
position: static;
z-index: 10;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
.button {
  transform: translate(-50%, -50%);
  background-color:  #a137a7;
  border: none;
  color: white;
  padding: 8px 13px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  position: absolute;
  cursor: pointer;
  right: -1%;
  bottom: -1%;
  font-family:'Source Sans Pro', sans-serif;
opacity: .8; }

.button:hover {
    background-color: #732878; /* Green */
    color: white;
}

<div class="btn-holder">
  <div class="button"><a href="/"><img class="img-responsive2"       
       src="http://static.tumblr.com/e2rgcy1/e6Yod1iwo/pop-out-icon.png"></a></div>
</div>




<!-- begin snippet: js hide: false console: true babel: false -->

Answer 1

这是一个快速的例子，可以帮助您开始朝着正确的方向前进！可以进行一些改进（例如延迟display:none，以便您可以实际单击菜单中的链接），但是您应该能够解决这个问题。如果不是在评论中告诉我，我会改进它。

＆＃13;

#btn-holder {
  background: rgba(255, 255, 255, 0.5);
  position: static;
  z-index: 10;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

#btn-holder > .button {
  transform: translate(-50%, -50%);
  background-color: #a137a7;
  border: none;
  color: white;
  padding: 8px 13px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  position: absolute;
  cursor: pointer;
  right: -1%;
  bottom: -1%;
  font-family: 'Source Sans Pro', sans-serif;
  opacity: .8;
  border-radius: 3px;
}

#btn-holder > .button:hover {
  background-color: #732878;
  color: white;
}

#btn-holder > .menu {
  opacity: 0;
  transition: opacity .5s;
  width: 100px;
  transform: translate(-50%, -50%);
  background-color: #333;
  border: none;
  color: white;
  padding: 8px;
  text-align: left;
  text-decoration: none;
  font-size: 16px;
  position: absolute;
  right: 0%;
  bottom: 25px;
  box-shadow:0 2px 7px rgba(0,0,0,.4);
}

.menu a {
  text-decoration: none;
  color: #eee;
  transition: color .3s;
}

.menu a:hover {
  color: #2196f3;
}

.menu > ul {
  list-style: none;
  margin: 2px;
  padding: 0 0 0 15px;
}

.menu > ul > li:first-child {
  margin-left: -15px;
}

.menu p {
  opacity: 1;
  margin: 0;
}

.menu p:after {
    content:"";
    display: block;
    height: 1px;
    vertical-align: bottom;
    width: 100%;
    border-top: 1px solid #eee;
    opacity: .4;
}

#btn-holder > .button:hover + .menu {
  opacity: 1;
  transistion-delay: 1s;
}

#btn-holder .menu:hover {
  opacity: 1;
}

＆＃13;

<div id="btn-holder">
  <div class="button">
    <a href="/"><img class="img-responsive2" src="https://static.tumblr.com/e2rgcy1/e6Yod1iwo/pop-out-icon.png"></a>
  </div>
  <div class="menu">
    <p><a href="#">Home</a></p>
    <ul>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Post 1</a></li>
      <li><a href="#">Post 2</a></li>
    </ul>
    <p><a href="#">Products</a></p>
    <p><a href="#">About</a></p>
  </div>
</div>

＆＃13;

以下是您可以用来尝试自己的更改的代码：http://codepen.io/XanderLuciano/pen/YGPoqE

我使用CSS +选择器选择div class="menu"之后发生的div class="button"，并将display从none更改为block .button:hover处于活动状态时#btn-holder > .button:hover + .menu { display: block; }。代码如下所示：

BulkWriteOptions bulkWriteOptions = new BulkWriteOptions();
bulkWriteOptions.ordered(true);

BulkWriteResult bulkWriteResult = null;
try {
    bulkWriteResult = mongoCollection.bulkWrite(updateDocuments,
            bulkWriteOptions);
} catch (BulkWriteException e) {
    List<BulkWriteError> bulkWriteErrors = e.getWriteErrors();
    for (BulkWriteError bulkWriteError : bulkWriteErrors) {
        int failedIndex = bulkWriteError.getIndex();
        Long failedEntity = entityList.get(failedIndex);
        System.out.println("Failed record: " + failedEntity);
        //handle rollback
    }
}

如果您有任何疑问，请与我们联系！：）

Answer 2

echo was unexpected at this time.

#btn-holder {
  background: rgba(255, 255, 255, 0.5);
  position: static;
  z-index: 10;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

#btn-holder > .button {
  transform: translate(-50%, -50%);
  background-color: #a137a7;
  border: none;
  color: white;
  padding: 8px 13px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  position: absolute;
  cursor: pointer;
  right: -1%;
  bottom: -1%;
  font-family: 'Source Sans Pro', sans-serif;
  opacity: .8;
  border-radius: 3px;
}

#btn-holder > .button:hover {
  background-color: #732878;
  color: white;
}

#btn-holder > .menu {
  opacity: 0;
  transition: opacity .5s;
  width: 100px;
  transform: translate(-50%, -50%);
  background-color: #333;
  border: none;
  color: white;
  padding: 8px;
  text-align: left;
  text-decoration: none;
  font-size: 16px;
  position: absolute;
  right: 0%;
  bottom: 25px;
  box-shadow:0 2px 7px rgba(0,0,0,.4);
}

.menu a {
  text-decoration: none;
  color: #eee;
  transition: color .3s;
}

.menu a:hover {
  color: #2196f3;
}

.menu > ul {
  list-style: none;
  margin: 2px;
  padding: 0 0 0 15px;
}

.menu > ul > li:first-child {
  margin-left: -15px;
}

.menu p {
  opacity: 1;
  margin: 0;
}

.menu p:after {
    content:"";
    display: block;
    height: 1px;
    vertical-align: bottom;
    width: 100%;
    border-top: 1px solid #eee;
    opacity: .4;
}

#btn-holder > .button:hover + .menu {
  opacity: 1;
  transistion-delay: 1s;
}

#btn-holder .menu:hover {
  opacity: 1;
}

下拉按钮持有人问题

2 个答案: