Menu
The mouseover function is not working with Google Chrome. Working fine with Firefox and IE. While mouseover the border bottom is not disappearing. But if removing border-collapse: collapse it's working fine. Why is this? Any solution.
css:
html, body{
margin: 0;
padding: 0;
}
.table {
border-collapse: collapse;
}
.border {
border-style: solid;
border-width: 1px;
border-color: #000000;
background-color: #deecf9;
border-left: 0px;
border-right: 0px;
}
.border1 {
border-style: solid;
border-width: 1px;
border-color: #000000;
background-color: #deecf9;
border-left: 0px;
border-right: 0px;
}
.border2 {
border-style: solid;
border-width: 1px;
border-color: #000000;
background-color: #FFFFFF;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
padding: 1px;
}
Table:
<table width="1024" border="0" align="center" bgcolor="#FFFFFF" class="table">
<tr>
<td height="9" colspan="4" class="border"></td>
</tr>
<tr>
<td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'"> </td>
<td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'"> </td>
<td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'"> </td>
<td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'"> </td>
</tr>
</table>
343
add margin:-1px; which reduces 1px to each side. or if you need only for side you can do margin-left:-1px etc. That was the best solution for me because, in my case, I set a 1px border to the orignal element and want to get, on hover, a thicker border (3px). Using margin: -2px; indeed works.
inset. Displays a border that makes the element appear embedded. It is the opposite of outset . When applied to a table cell with border-collapse set to collapsed , this value behaves like groove .
The easiest and most convenient way to navigate through links/websites without leaving your current tab. Hover's chrome extension saves your time by letting you view a link's content or a plain text by just hovering over it without opening it in a new tab.
Answer: Use the negative CSS margin If you apply the border around an element on mouse hover it will move the surrounding elements from its original position, this is the default behavior.
Do it like this: put an transparent border on your normal state elements. When the :hover is applied the size of the border changes the size the element takes up.
eg:
.border1
{
border:1px solid #000000;
border-left:1px solid transparent;
border-right:1px solid transparent;
background-color: #FFFFFF;
}
.border1:hover
{
border:1px solid transparent;
border-top:1px solid #000000;
padding:1px;
background-color: #deecf9;
}
Your HTML should be something like:
<table width="1024" align="center" bgcolor="#FFFFFF" class="table">
<tr>
<td height="9" colspan="4" class="border"></td>
</tr>
<tr>
<td class="border1"> </td>
<td class="border1"> </td>
<td class="border1"> </td>
<td class="border1"> </td>
</tr>
</table>
No need to work with the mouseovers as an attribute, just use css.
Edit: i've noticed that you're using the css border-collapse property. This sets whether the table borders are collapsed into a single border or detached as in standard HTML. Try removing this line or set it to "separate", maybe this will work.
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
