|
[x]
Posted via EE Mobile
|
|
| Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again. |
|
|
|
|
Asked by CreativewithTechnology in Cascading Style Sheets (CSS), JavaScript
We have a list item which has a hover effect on each <li>, the hover effect simply changes the background colour.
I've created some javascript to look at what page you are viewing, and change the background colour of the matching <li> so the user can visibly see where they are at in the site.
The problem comes, when the user selected to view another page, the javascript sets the background colour of the next <a> inside the <li> to show they are viewing a new pages, and then removes the background colour on the previous <a> by making the background transparent. This works a treat, however once the background colour of the <a> has been set to transparent, the hover effect on links within that particular <li> no longer work.
Is there a way around this? I've attached snippets of code.
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
|
**** The javascript that sets the background color ****
// Highlight the nav item being viewed
function setNavItem(item) {
// Set the background color of the selected item
document.getElementById(item).style.backgroundColor = '#dbf0b0';
alert(document.getElementById(item).className);
if (currentNavItem != '') {
// Clear the previous nav item
document.getElementById(currentNavItem).style.backgroundColor = 'transparent';
}
// Set currentNavItem to the selected item
currentNavItem = item;
}
**** The List ****
<div id="lhsInner2" class="leftBoxInner"> <img src="images/left-box-inner-img.png" alt="Left image" height="18" width="287" />
<ul>
<li><a id="T2_The_Lucky_Few" href="T2_Success_With_MiLife.aspx?page=T2_The_Lucky_Few">the 'lucky' few?</a></li>
<li><a id="T2_Why_Try_Again" href="T2_Success_With_MiLife.aspx?page=T2_Why_Try_Again">so, why try again?</a></li>
<li><a id="T2_Personal_Solutions" href="T2_Success_With_MiLife.aspx?page=T2_Personal_Solutions">we need personal solutions...</a></li>
<li><a id="T2_Personalisation" href="T2_Success_With_MiLife.aspx?page=T2_Personalisation">the difference is personalisation...</a></li>
</ul>
</div>
**** The CSS ****
.leftBoxInner {
width: 287px;
overflow: hidden;
background: url(../images/left-box-inner-bg.png) bottom repeat-x;
margin: 0px 0px 0px 1px;
}
.leftBoxInner ul {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 9px;
list-style: none;
}
.leftBoxInner ul li {
color: #93c83a;
font-size: 75%;
width: 266px;
}
.leftBoxInner ul li a {
color: #858484;
text-decoration: none;
display: block;
padding: 3px 0px 3px 20px;
background: url(../images/left-box-green-bullet.gif) no-repeat left;
}
|
20091118-EE-VQP-93 / EE_QW_2_20070628
