我正在设计一个网站，但我在边栏中遇到了一个问题。我想在右侧创建一个侧边栏，它从右侧悬停到左侧，并在 courser 移到它上面时显示完整内容。与 https://www.psx.com.pk 中的侧边栏非常相似. 我在右侧创建了一个悬停的侧边栏，效果很好。但是现在我遇到了问题，因为它需要一个单独的空间来悬停，而我希望它悬停在我的页面内容上。就像我在链接中提到的 https://www.psx.com.pk .
这是我身边的条形码
<head>
<style>
#sidebar-body {
overflow-x: hidden;
}
.sidebar {
/*background: #42b078;*/
position: relative;
right: -260px;
width: 450px;
height: 180px;
transition: all 0.3s;
cursor: pointer;
display: block;
}
.sidebar:hover {
right: 0;
}
</style>
</head>
<body id="sidebar-body">
<div class="sidebar">
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Settings</a>
</div>
</div>
</body>
我在我的完整 Laravel 页面中像这样使用它
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Entity</th>
<th scope="col">Industry</th>
<th scope="col">Rating Type</th>
<th scope="col">Dissemination Date</th>
<th scope="col">Long Term Rating</th>
<th scope="col">Short Term Rating</th>
<th scope="col">Outlook</th>
<th scope="col">Action</th>
<th scope="col">#</th>
<th scope="col">#</th>
<th scope="col">#</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
@include('includes.sidebar')
</div>
它在我的页面上是这样的mypageIMAGE
虽然我希望它看起来像这样SampleImg1 SampleImg2
最佳答案
位置错误是由于.sidebar {position: relative;}
将其更改为 {position: fixed} 因为您希望侧边栏始终固定在所需位置。
调整 width 和 right 以理想地仅在未悬停时显示您的图标。
http://jsfiddle.net/8doa3nvg/2/这是基于您的代码示例的 jsfiddle 代码片段。
取决于你想用你的 Blade View 做什么。只是想建议您，您可能需要为所有设备响应地创建侧边栏，因为悬停在移动设备中不可用。
关于html - 如何使右侧边栏悬停在页面上下文上而不是占用单独的空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58558903/