I am working with a UL that contains multiple LI's. Within each li, there is a table.
Using mootools, I have made my li elements draggable/sortable. However, I only want a small portion of the li element (and its child table) to be draggable.
I attempted to use 'relative and absolute' positioning to solve this issue, but the hover effect of the li persists. When hovering over the (child) table, the (parent) li still displays its hover effect, which is not desired.
<ul>
<li>
<table cellpadding="0" cellspacing="0">
<tr>
<td>...</td>
<td><a href="foobar.html">foobar</a></td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>
</li>
</ul>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
li {
background-color: red;
width: 25px;
height: 25px;
float: left;
clear: both;
}
li:hover {
background-color: green;
cursor: move;
}
li table {
border: 1px solid #eee;
width: 850px;
position: absolute;
}
</style>When implementing this code, you'll notice that the actual li size is 25x25. However, when hovering over the table, the li turns green (only that 25x25 part).
My goal is for only that specific 25x25 area to respond to the hover event!