下拉按钮列表。 Onmousover 在右侧显示按钮说明
List of drop-down buttons. Onmousover show button description on right side
我有一个按钮列表和带有下拉菜单的按钮。
当我将鼠标放在每个按钮上时,它会在列表底部显示按钮的简要说明(参见示例)。
现在它仅适用于第一级按钮,不适用于下拉列表项。
综上所述,我想:
显示列表右侧每个项目的描述 (onmouseover
),如图所示(不是在底部,就像现在这样)
显示描述 (onmouseover
) 不仅适用于第一级按钮,也适用于下拉列表中的项目。
如果能提供可行的解决方案,我将不胜感激。
.element-1,
.element-2,
.element-3 {
display: none;
}
.a-1:hover~.element-1 {
display: block;
}
.a-2:hover~.element-2 {
display: block;
}
.a-3:hover~.element-3 {
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<p>
<font color="#909497">Drop-down Buttons list</font>
</p>
<div class="container" style="width: 350px; height: 22px;">
<button title="Description 1" class="a-1" id="menu1" onclick="window.open('http://link.com', '_blank')" type="button" style="width: 268px; height: 68px;">Button 1</button>
<div align="left" class="dropdown" style="width: 333px; height: 34px;">
<button class="btn btn-default dropdown-toggle" id="menu1" aria-expanded="false" type="button" data-toggle="dropdown" style="width: 268px; height: 34px;">Drop-Down Button 1
<span class="caret"></span></button>
<ul title="Drop-down item 1 description" class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li class="a-2" role="presentation">
<a tabindex="-1" class="a-2" href="https://link2.com/" target="_blank">Drop-down item 1</a></li>
<li title="Drop-down item 2 description" role="presentation">
<a tabindex="-1" role="menuitem" href="https://link3.com" target="_blank">Drop-down item 2</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" style="width: 268px; height: 34px;">Drop-Down Button 3
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li title="drop-down item 3 description" class="a-2" role="presentation">
<a tabindex="-1" role="menuitem" href="http://link6.com" target="_blank">Drop-down item 3 </a></li>
<li title="drop-down item 4 description" role="presentation">
<a tabindex="-1" role="menuitem" href="#">Drop-down item 4 </a></li>
<li title="drop-down item 5 description" role="presentation">
<a tabindex="-1" role="menuitem" href="#">Drop-down item 5 </a></li>
<li title="drop-down item 6 description" role="presentation">
<a tabindex="-1" role="menuitem" href="http://link.com" target="_blank">Drop-down item 6</a></li>
<li title="Drop-down item 7 description" role="presentation">
<a tabindex="-1" role="menuitem" href="#">Drop-down item 7</a></li>
</ul>
</div>
<button title="Button 4 description" class="a-2" id="menu1" onclick="window.open('http://link.com', '_blank')" type="button" style="width: 268px; height: 34px;">Button 4</button><button title="Button 4 description" class="a-3" id="menu1"
onclick="window.open('http://link.com', '_blank')" type="button" style="width: 268px; height: 34px;">Button 5 </button>      
<div class="element-1" style="width: 350px;">
<img width="45" height="45" src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX2310920.jpg" data-themekey="#" alt="" />
<br/>Button 1 description</div>
<div class="element-2" style="width: 350px;">Button 4 description</div>
<div class="element-3" style="width: 350px;">Button 5 description</div>
</div>
我已将描述元素移到它们的按钮之后。
然后,我添加了 class description
以轻松定位所有描述 div
s,
另一个 descripted
,可以轻松定位所有带有描述的按钮……
添加一些 CSS 就可以了:
.container {
/* Added for visibility */
background: #eee;
}
.description {
display: none;
/* The absolute positioning refers to the container. */
position: absolute;
transform: translate(100%, -100%);
}
.descripted:hover+.description {
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<p>
<font color="#909497">Drop-down Buttons list</font>
</p>
<div class="container" style="width: 350px; height: 22px;">
<button title="Description 1" class="a-1 descripted" id="menu1" onclick="window.open('http://link.com', '_blank')" type="button" style="width: 268px; height: 68px;">Button 1</button>
<div class="description" style="width: 350px;">
<img width="45" height="45" src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX2310920.jpg" data-themekey="#" alt="" />
<br/>Button 1 description
</div>
<div align="left" class="dropdown" style="width: 333px; height: 34px;">
<button class="btn btn-default dropdown-toggle descripted" id="menu1" aria-expanded="false" type="button" data-toggle="dropdown" style="width: 268px; height: 34px;">Drop-Down Button 1<span class="caret"></span></button>
<div class="description" style="width: 350px;">
<img width="45" height="45" src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX2310920.jpg" data-themekey="#" alt="" />
<br/>Drop-Down 1 description
</div>
<ul title="Drop-down item 1" class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li class="a-2 descripted" role="presentation">
<a tabindex="-1" class="a-2" href="https://link2.com/" target="_blank">Drop-down item 1</a>
</li>
<div class="description" style="width: 350px;">
<img width="45" height="45" src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX2310920.jpg" data-themekey="#" alt="" />
<br/>Drop-Down item 1 description
</div>
<li class="descripted" title="Drop-down item 2" role="presentation">
<a tabindex="-1" role="menuitem" href="https://link3.com" target="_blank">Drop-down item 2</a>
</li>
<div class="description" style="width: 350px;">
<img width="45" height="45" src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX2310920.jpg" data-themekey="#" alt="" />
<br/>Drop-Down item 2 description
</div>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" style="width: 268px; height: 34px;">Drop-Down Button 3<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li title="drop-down item 3 description" class="a-2" role="presentation">
<a tabindex="-1" role="menuitem" href="http://link6.com" target="_blank">Drop-down item 3 </a>
</li>
<li title="drop-down item 4 description" role="presentation">
<a tabindex="-1" role="menuitem" href="#">Drop-down item 4 </a>
</li>
<li title="drop-down item 5 description" role="presentation">
<a tabindex="-1" role="menuitem" href="#">Drop-down item 5 </a>
</li>
<li title="drop-down item 6 description" role="presentation">
<a tabindex="-1" role="menuitem" href="http://link.com" target="_blank">Drop-down item 6</a>
</li>
<li title="Drop-down item 7 description" role="presentation">
<a tabindex="-1" role="menuitem" href="#">Drop-down item 7</a>
</li>
</ul>
</div>
<button title="Button 4 description" class="a-2" id="menu1" onclick="window.open('http://link.com', '_blank')" type="button" style="width: 268px; height: 34px;">Button 4</button><button title="Button 4 description" class="a-3" id="menu1"
onclick="window.open('http://link.com', '_blank')" type="button" style="width: 268px; height: 34px;">Button 5 </button>      
</div>
我只在前两个按钮上完成了,但你明白了!
如果您需要修改,请随时发表评论。
希望对您有所帮助!
我有一个按钮列表和带有下拉菜单的按钮。
当我将鼠标放在每个按钮上时,它会在列表底部显示按钮的简要说明(参见示例)。
现在它仅适用于第一级按钮,不适用于下拉列表项。
综上所述,我想:
显示列表右侧每个项目的描述 (
onmouseover
),如图所示(不是在底部,就像现在这样)显示描述 (
onmouseover
) 不仅适用于第一级按钮,也适用于下拉列表中的项目。
如果能提供可行的解决方案,我将不胜感激。
.element-1,
.element-2,
.element-3 {
display: none;
}
.a-1:hover~.element-1 {
display: block;
}
.a-2:hover~.element-2 {
display: block;
}
.a-3:hover~.element-3 {
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<p>
<font color="#909497">Drop-down Buttons list</font>
</p>
<div class="container" style="width: 350px; height: 22px;">
<button title="Description 1" class="a-1" id="menu1" onclick="window.open('http://link.com', '_blank')" type="button" style="width: 268px; height: 68px;">Button 1</button>
<div align="left" class="dropdown" style="width: 333px; height: 34px;">
<button class="btn btn-default dropdown-toggle" id="menu1" aria-expanded="false" type="button" data-toggle="dropdown" style="width: 268px; height: 34px;">Drop-Down Button 1
<span class="caret"></span></button>
<ul title="Drop-down item 1 description" class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li class="a-2" role="presentation">
<a tabindex="-1" class="a-2" href="https://link2.com/" target="_blank">Drop-down item 1</a></li>
<li title="Drop-down item 2 description" role="presentation">
<a tabindex="-1" role="menuitem" href="https://link3.com" target="_blank">Drop-down item 2</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" style="width: 268px; height: 34px;">Drop-Down Button 3
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li title="drop-down item 3 description" class="a-2" role="presentation">
<a tabindex="-1" role="menuitem" href="http://link6.com" target="_blank">Drop-down item 3 </a></li>
<li title="drop-down item 4 description" role="presentation">
<a tabindex="-1" role="menuitem" href="#">Drop-down item 4 </a></li>
<li title="drop-down item 5 description" role="presentation">
<a tabindex="-1" role="menuitem" href="#">Drop-down item 5 </a></li>
<li title="drop-down item 6 description" role="presentation">
<a tabindex="-1" role="menuitem" href="http://link.com" target="_blank">Drop-down item 6</a></li>
<li title="Drop-down item 7 description" role="presentation">
<a tabindex="-1" role="menuitem" href="#">Drop-down item 7</a></li>
</ul>
</div>
<button title="Button 4 description" class="a-2" id="menu1" onclick="window.open('http://link.com', '_blank')" type="button" style="width: 268px; height: 34px;">Button 4</button><button title="Button 4 description" class="a-3" id="menu1"
onclick="window.open('http://link.com', '_blank')" type="button" style="width: 268px; height: 34px;">Button 5 </button>      
<div class="element-1" style="width: 350px;">
<img width="45" height="45" src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX2310920.jpg" data-themekey="#" alt="" />
<br/>Button 1 description</div>
<div class="element-2" style="width: 350px;">Button 4 description</div>
<div class="element-3" style="width: 350px;">Button 5 description</div>
</div>
我已将描述元素移到它们的按钮之后。
然后,我添加了 class description
以轻松定位所有描述 div
s,
另一个 descripted
,可以轻松定位所有带有描述的按钮……
添加一些 CSS 就可以了:
.container {
/* Added for visibility */
background: #eee;
}
.description {
display: none;
/* The absolute positioning refers to the container. */
position: absolute;
transform: translate(100%, -100%);
}
.descripted:hover+.description {
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<p>
<font color="#909497">Drop-down Buttons list</font>
</p>
<div class="container" style="width: 350px; height: 22px;">
<button title="Description 1" class="a-1 descripted" id="menu1" onclick="window.open('http://link.com', '_blank')" type="button" style="width: 268px; height: 68px;">Button 1</button>
<div class="description" style="width: 350px;">
<img width="45" height="45" src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX2310920.jpg" data-themekey="#" alt="" />
<br/>Button 1 description
</div>
<div align="left" class="dropdown" style="width: 333px; height: 34px;">
<button class="btn btn-default dropdown-toggle descripted" id="menu1" aria-expanded="false" type="button" data-toggle="dropdown" style="width: 268px; height: 34px;">Drop-Down Button 1<span class="caret"></span></button>
<div class="description" style="width: 350px;">
<img width="45" height="45" src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX2310920.jpg" data-themekey="#" alt="" />
<br/>Drop-Down 1 description
</div>
<ul title="Drop-down item 1" class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li class="a-2 descripted" role="presentation">
<a tabindex="-1" class="a-2" href="https://link2.com/" target="_blank">Drop-down item 1</a>
</li>
<div class="description" style="width: 350px;">
<img width="45" height="45" src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX2310920.jpg" data-themekey="#" alt="" />
<br/>Drop-Down item 1 description
</div>
<li class="descripted" title="Drop-down item 2" role="presentation">
<a tabindex="-1" role="menuitem" href="https://link3.com" target="_blank">Drop-down item 2</a>
</li>
<div class="description" style="width: 350px;">
<img width="45" height="45" src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX2310920.jpg" data-themekey="#" alt="" />
<br/>Drop-Down item 2 description
</div>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" style="width: 268px; height: 34px;">Drop-Down Button 3<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li title="drop-down item 3 description" class="a-2" role="presentation">
<a tabindex="-1" role="menuitem" href="http://link6.com" target="_blank">Drop-down item 3 </a>
</li>
<li title="drop-down item 4 description" role="presentation">
<a tabindex="-1" role="menuitem" href="#">Drop-down item 4 </a>
</li>
<li title="drop-down item 5 description" role="presentation">
<a tabindex="-1" role="menuitem" href="#">Drop-down item 5 </a>
</li>
<li title="drop-down item 6 description" role="presentation">
<a tabindex="-1" role="menuitem" href="http://link.com" target="_blank">Drop-down item 6</a>
</li>
<li title="Drop-down item 7 description" role="presentation">
<a tabindex="-1" role="menuitem" href="#">Drop-down item 7</a>
</li>
</ul>
</div>
<button title="Button 4 description" class="a-2" id="menu1" onclick="window.open('http://link.com', '_blank')" type="button" style="width: 268px; height: 34px;">Button 4</button><button title="Button 4 description" class="a-3" id="menu1"
onclick="window.open('http://link.com', '_blank')" type="button" style="width: 268px; height: 34px;">Button 5 </button>      
</div>
我只在前两个按钮上完成了,但你明白了!
如果您需要修改,请随时发表评论。
希望对您有所帮助!