javascripthtmlcssdom-eventsmouseevent
List of drop-down buttons. Onmousover show button description on right side
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>Solution
I've moved the description elements right after their buttons.
Then, I've added the class description to easily target all the description divs,
and another one, descripted, to easily target all the buttons with description…
Add some CSS and here you go:
.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>I've done it only on the 2 first buttons, but you get the idea!
Feel free to comment if you want some modification.
Hope it helps!
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices