I have a list of buttons and buttons with drop-down menu.
When I place my mouse over each button, it shows a brief description of the button at the bottom of the list (see example).
Now it is working only for first level buttons but not for drop-down list items.
In summary, I would like to:
show description (onmouseover) of each item on the RIGHT from the list, as shown in the image (not at the bottom, like it is now)
show description (onmouseover) not just for first level buttons but also for items in the drop-down lists.
I would be very thankful for a working solution.
.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>