如何解决div上的鼠标悬停问题,最后一个div上出现了水平滚动
我连续有多个块,每个块都有自定义popover div。如果用户将鼠标悬停在最后一个div或倒数第二个div上,则弹出窗口将超出窗口宽度。我想要,如果右侧没有足够的空间用于弹出框,则将tile-box类更改为tile-box1。提前致谢! 下面是代码笔的参考网址,我也附上了图片。
.content {
display: flex;
flex-wrap: wrap;
}
.box {
width: 150px;
height: 100px;
position: relative;
border: 1px solid #ddd;
}
.box:hover .tile-box {
display: block;
;
}
.tile-box {
display: none;
position: absolute !important;
z-index: 9;
top: -6px;
left: 169px;
width: 220px;
height: auto;
/* padding: 15px; */
margin-top: 15px;
position: relative;
background: #fff;
border-radius: 8px;
box-shadow: 0 0 14px 0 rgba(0,0.06);
border: solid 1px #e8e8e8;
/* -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease; */
}
.tile-box {
padding: 15px !important;
/* display: block !important; */
}
.tile-box::after {
content: "";
position: absolute;
width: 0;
height: 0;
top: 32px;
left: 0px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-width: 8px;
border-style: solid;
border-color: transparent transparent white white;
-webkit-transform-origin: 0 0;
-webkit-transform: rotate(45deg);
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-box-shadow: -3px 2px 2px rgba(0,0.05);
box-shadow: -3px 2px 2px rgba(0,0.05);
}
.tile-box1{
display:block;
}
<div class="content">
<div class="box">
<h1>box 1</h1>
<div class="tile-box">
<p>lorem ipsum dolor</p>
</div>
</div>
<div class="box">
<h1>box 2</h1>
<div class="tile-box">
<p>lorem ipsum dolor</p>
</div>
</div>
<div class="box">
<h1>box 3</h1>
<div class="tile-box">
<p>lorem ipsum dolor</p>
</div>
</div>
<div class="box">
<h1>box 4</h1>
<div class="tile-box">
<p>lorem ipsum dolor</p>
</div>
</div>
</div>
Codepen网址:(https://codepen.io/uibeast/pen/yLJgJra)
解决方法
以下是一些Javascript脚本,应有助于检测瓦片何时超出范围。现在,我只包含一个虚拟控制台日志,您应该能够切换类名或其他名称,而不是控制台日志。
基本上,代码要做的是获取图块最右边部分的x坐标,并将其与window.innerHeight
进行比较。如果前者更大,则磁贴将超出窗口的右侧。
$(".box").on("mouseenter",function() {
var tile = $(this).find(".tile-box")[0];
var rect = tile.getBoundingClientRect();
//if right of tile is beyond viewport
if(rect.right > window.innerWidth) {
//dummy console log for demo
console.log("doesn't fit!");
//switch class of tile or something
}
})
演示:
$(".box").on("mouseenter",function() {
var tile = $(this).find(".tile-box")[0];
var rect = tile.getBoundingClientRect();
//if right of tile is beyond viewport
if(rect.right > window.innerWidth) {
//dummy console log for demo
console.log("doesn't fit!");
//switch class of tile or something
}
})
.content {
display: flex;
flex-wrap: wrap;
}
.box {
width: 150px;
height: 100px;
position: relative;
border: 1px solid #ddd;
}
.box:hover .tile-box {
display: block;
;
}
.tile-box {
display: none;
position: absolute !important;
z-index: 9;
top: -6px;
left: 169px;
width: 220px;
height: auto;
/* padding: 15px; */
margin-top: 15px;
position: relative;
background: #fff;
border-radius: 8px;
box-shadow: 0 0 14px 0 rgba(0,0.06);
border: solid 1px #e8e8e8;
/* -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease; */
}
.tile-box {
padding: 15px !important;
/* display: block !important; */
}
.tile-box::after {
content: "";
position: absolute;
width: 0;
height: 0;
top: 32px;
left: 0px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-width: 8px;
border-style: solid;
border-color: transparent transparent white white;
-webkit-transform-origin: 0 0;
-webkit-transform: rotate(45deg);
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-box-shadow: -3px 2px 2px rgba(0,0.05);
box-shadow: -3px 2px 2px rgba(0,0.05);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<div class="box">
<h1>box 1</h1>
<div class="tile-box">
<p>lorem ipsum dolor</p>
</div>
</div>
<div class="box">
<h1>box 2</h1>
<div class="tile-box">
<p>lorem ipsum dolor</p>
</div>
</div>
<div class="box">
<h1>box 3</h1>
<div class="tile-box">
<p>lorem ipsum dolor</p>
</div>
</div>
<div class="box">
<h1>box 4</h1>
<div class="tile-box">
<p>lorem ipsum dolor</p>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。