Highlighting Help

Hi Everyone,

I have a database of symptoms for users to choose from for my health site, www.eradvisor.com

The problem is when people start typing in the symptom box and the list of symptoms to choose from appears, they aren’t highlighting when the user hovers over them to choose. Also, the curser doesn’t change to the standard pointer. Hope that makes sense.

If anyone has any ideas, I would really appreciate it.

Thanks!

Mike

Because they aren’t links, and you seem to have nothing in your CSS to style the classes you add with JS when hovering in and out of the divs that surround the suggestions?

I’ll have to ask our web dev guy when he gets back from vacation…thought I could figure it out but I’m not sure I follow you! I don’t want the mouse to change to a pointer for links (a little hand if you will), just to an arrow…I swear at one point they were being highlighted when you moused over, but maybe something got changed. Thanks!

Hi again! So our site/company is a finalist for a Bootstrap Award for Community Impact here in Canada (the Explorium Bootstrap Awards) and they are judging this Friday. Our web guy is still away so I am hoping I can figure this out!

As I mentioned before, when a user starts to type in their symptom (say its leg pain) a list appears after two or three letters with a list for them to choose from and add it to their symptoms. The annoying part is that when they hover over the list to choose their symptom, there is no highlight to let them know which symptom their are choosing. Hope that makes sense. I know how to code html and css, but that’s it. I think this is java and cold fusion maybe? Any help would be great.

As a bonus, if anyone could figure out how once a symptom is clicked, the user doesn’t then need to click on “Add to My Symptoms” for it to count towards our equation would be awesome.

Maybe this is really hard and will take a long time, I have no idea. I apologize if this is the case. Hoping someone here knows a quick fix for us before the judging on Friday.

Thanks so much for any help.

Cheers, Mike

You can try to add a line in your CSS such as

.suggested_link:hover {cursor: help; background-color:#fff}

That could be a quick solution. The script creates everything, including the hover effect that’s not working, obviously.

But this little piece of CSS in your CSS file should do the trick. The cursor will become a hand when it is over a term with a class of suggested_link (which happens to be the terms on the search) and the background of that term will be white.

Thanks for the reply, unfortunately, it didn’t work. I added it to my CSS but no luck!

The class is called suggest_link so that code should be

.suggest_link:hover {cursor: help; background-color:#fff}

The css file is style2.css (just to be sure :wink: )

Yup! added it to the very bottom of the stylesheet…

[ot]Geez… are you saying that my answer was less than perfect? Details, details :p[/ot]@Mike7367; I understand that it worked. I’m happy for you. Now you will have plenty time to talk to your developer when (s)he returns and fix whatever needs to be fixed :slight_smile:

Sorry for the confusion it DID NOT work. I added it the bottom of my stylesheet (style2.css) and it still won’t highlight…any other options? Thanks for your help!!

*update!

Thought I made some progress, I added this to my css (for my test site www.eradvisor.com/test.html )

#search_suggest:hover
{
cursor: help;
background-color:#fff;
}

But it made the whole list change to white when I hovered over, not just the individual entries…blargh!!

The javascript changes the class name in suggest_link_over when you hover over a suggestion. Try

.suggest_link_over:hover {cursor: help; background-color:#fff}

Thanks for the suggestion, but to no avail. Still highlights the whole list…frustrating!

Thanks for the help though, it is appreciated.

Because you still have this in the CSS file:

#search_suggest:hover
{
cursor: help;
background-color:#fff;
}

Eliminate it :slight_smile:

Woohoo!!! Thanks!! You are a gentleman and a scholar.