Question

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

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

Answer 1

这样的事可能是：http://jsfiddle.net/ctj3ykzd/

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

这正是我所做的，我用.active替换了:hover（我在你的标记中修复了那个缺失的引号）

CSS退出菜单没有响应

1 个答案: