nsitedesigns
asked on
navigation mouseover remains active on pages
How do I modify page so the mouseover effect remains activated when visitor opens a web page? I created a class but it didn't work right. I put it on the Caregiving button on this page only.
http://www.embracecaremanagement.com/caregiving.html
http://www.embracecaremanagement.com/embrace.css
<li class="active"><a href="caremanagement.html" >Care Management</a></li>
http://www.embracecaremanagement.com/caregiving.html
http://www.embracecaremanagement.com/embrace.css
<li class="active"><a href="caremanagement.html"
<ul id="nav">
<li><a href="services.html">Services</a></li>
<li class="active"><a href="caremanagement.html">Care Management</a></li>
<li><a href="caregiving.html">Caregiving</a></li>
<li><a href="team.html">Team Members</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="stories.html">Client Stories</a></li>
<li><a href="news.html">News</a></li>
<li><a href="video.html">Video</a></li>
<li><a href="http://sheboyganseniorcare-helpishere.blogspot.com/" target="_blank">Blog</a></li>
<li><a href="links.html">Links/Resources</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="index.html">Home</a></li>
</ul>
.active {color: #3b2f18;
background: #c7e7b7;/* light green mouseover color on button */
background-image:url(img/mouseover2.png);
background-repeat:no-repeat;
background-position:left center;}
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
HainKurt,
How do I modify the css? That is my question.
How do I modify the css? That is my question.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
greatGerm,
I tried moving the css down the sheet and adding the important tag to the background and this is what happened.
http://screencast.com/t/VxLizwgrwUI
I tried moving the css down the sheet and adding the important tag to the background and this is what happened.
http://screencast.com/t/VxLizwgrwUI
ASKER
Oops - I see what I did to get the goofy results with the link above. I fixed that. But still not getting the results that I am hoping for.
Back to square one.
Back to square one.
Not square one :)
Change .active to .active a
Change .active to .active a
ASKER
You are right, square two. : )
adding "a" to active worked partially. I had to add important! to all active declarations. Is that ok to do? I heard to use important! sparingly.
.active a {color: #3b2f18!important;
background: #c7e7b7 !important;/* light green mouseover color on button */
background-image:url(img/m ouseover2. png)!impor tant;
background-repeat:no-repea t!importan t;
background-position:left center!important;}
adding "a" to active worked partially. I had to add important! to all active declarations. Is that ok to do? I heard to use important! sparingly.
.active a {color: #3b2f18!important;
background: #c7e7b7 !important;/* light green mouseover color on button */
background-image:url(img/m
background-repeat:no-repea
background-position:left center!important;}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Yes, you would need to add the !important rule to all declarations that are overridden down the cascade.
You are correct, you will want to use it sparingly since it does break out of the cascade, but this is the type of situation for which it was meant. Like most things CSS you have other options such as changing the order of the declarations, putting the styles inline, using client-side scripting (i.e. javascript), etc.
How you do it is up to you.
You are correct, you will want to use it sparingly since it does break out of the cascade, but this is the type of situation for which it was meant. Like most things CSS you have other options such as changing the order of the declarations, putting the styles inline, using client-side scripting (i.e. javascript), etc.
How you do it is up to you.
ASKER
Hey Kravimir!
I removed the important! from the declaration and changed it to "ul#nav .active a" but that only worked partially. I see the green bar now but not the little ball to the left. The link below is the only page that I have this applied to: See what I mean... What did I miss?
http://www.embracecaremanagement.com/caregiving.html
I removed the important! from the declaration and changed it to "ul#nav .active a" but that only worked partially. I see the green bar now but not the little ball to the left. The link below is the only page that I have this applied to: See what I mean... What did I miss?
http://www.embracecaremanagement.com/caregiving.html
ul#nav .active a {color: #3b2f18;
background: #c7e7b7;/
background-image:url(img/mouseover2.png);
background-repeat:no-repeat;
background-position:left center;}
ASKER
I moved the declaration lower on the css page too and it still doesn't seem to work...
ASKER
Wahoo-dilly-do!
thanks. Time for new glasses I guess.
thanks. Time for new glasses I guess.
ASKER
Thanks all!
This site has a cool function for getting at url parameters: http://www.netlobo.com/url_query_string_javascript.html
Here is the resulting page which works for me:
Open in new window