html - CSS 下拉菜单无响应

Question

所以我真的一直在努力解决这个问题。我正在尝试制作一个固定在网站一侧的按钮框。我得到了按钮，html 似乎可以工作，但是当鼠标悬停在上面时它没有响应。或者，我可以使用需要单击的按钮进行管理。这是我正在使用的 CSS 和 HTML。任何帮助将不胜感激

/* SLIDING BLOCKS */

.pull-item {
  position: fixed;
  z-index: 20000;
  transition: all 0.7s ease 0s;
  -webkit-transition: all 0.7s ease 0s;
  -ms-transition: all 0.7s ease 0s;
  -moz-transition: all 0.7s ease 0s;
  -o-transition: all 0.7s ease 0s;
  width: 304px;
}
.pull-item.top.right {
  top: 160px;
  right: -304px;
}
.pull-item.middle.right {
  top: 150px;
  right: -304px;
}
.pull-item.bottom.right {
  top: 270px;
  right: -304px;
}
.pull-item:hover {
  z-index: 20100;
}
.pull-item.right .pull_butoon {
  position: absolute;
  top: 0px;
  left: -50px;
  background-color: #f5f5f5;
  border-radius: 0px 0px 0px 3px;
  -moz-border-radius: 3px 0px 0px 3px;
  -webkit-border-radius: 3px 0px 0px 3px;
  overflow: hidden;
  width: 50px;
  height: 50px;
}
.pull_butoon img {
  max-width: 50px;
  max-height: 50px;
}
.pull-item.right .top-level-pull-out {
  padding: 12px;
  float: right;
  background-color: #f5f5f5;
  border-radius: 0px 0px 0px 3px;
  -moz-border-radius: 0px 0px 0px 3px;
  -webkit-border-radius: 0px 0px 0px 3px;
  width: 280px;
}
.pull-inner {
  background-color: #ffffff;
  overflow: hidden;
  padding: 20px;
}
.pull-inner p {
  margin: 0;
}
.pull-inner img {
  margin: 0;
  max-width: 100%;
}
.pull-item.left.active {
  left: 0px !important;
}
.pull-item.right.active {
  right: 0px !important;
}

<div class="pull-item middle right" style="width:374px;right:-374px">
  <div class="top-level-pull-out style=" width:350px ">
        				<div class="pull-inner ">
        					<div>
        						<h4>Place any HTML here</h4>
        						<p>&nbsp;
    
        <img src="http://wpdemo.bigonetheme.eu/wp-content/uploads/2015/02/responsive_web_design.png " alt=" ">
        Phasellus euismod tortor ante, et accumsan velit consectetur vitae. Donec dignissim faucibus libero nec luctus. Suspendisse eu tortor mi. Suspendisse dictum justo felis. Pellentesque egestas vel urna nec facilisis. Sed dictum bibendum lobortis. Curabitur vehicula.</p>
        					</div>
        				</div>
        			</div>
        			<div class="pull_butoon ">
        									<img width="50 " height="50 " src="http://wpdemo.bigonetheme.eu/wp-content/uploads/2015/02/icon_heart-50x501-50x50.png " class="attachment-bio-icon " alt="icon_heart-50x50 ">							</div>
        		</div>

Answer 1

也许是这样的:http://jsfiddle.net/ctj3ykzd/

您使用 .active 类来设置按钮悬停状态的样式。如果您要通过 Javascript 以某种方式添加此类，这很好，但如果您想使用纯 css，则必须使用 :hover 伪类。

这正是我所做的，我将 .active 替换为 :hover (并且我修复了标记中缺少的引号)