Jump to content

Onmouseover In Span Tags Doesn't Execute


Costanza
 Share

Recommended Posts

I have this list of items which is displaying fine, but the functions within the span tags don't work (onmouseover and onmouseout). I've tried placing alerts in the beginning of the functions and I learned that they don't even begin to execute. Also, the cursor doesn't change to 'pointer' when I mouse over them. Is there something i should know about span tags? I looked up the onmouseover event and it says that span tag is supported (http://www.w3schools.com/jsref/event_onmouseover.asp) The weird thing is that it actually worked a few times I tested the page (between making changes to other unrelated parts of the page--but even then it would only work on the first item in the list, but not the others. But now it doesn't work at all.

<ul class="presetsList">                <li><span class="presetListItem" onClick="setPreset('example1')" onMouseOver="presetHighlight(this)" onMouseOut="presetRemoveHighlight(this)">example1</span></li>                <li><span class="presetListItem" onClick="setPreset('example2')" onMouseOver="presetHighlight(this)" onMouseOut="presetRemoveHighlight(this)">example2</span></li>                <li><span class="presetListItem" onClick="setPreset('example3')" onMouseOver="presetHighlight(this)" onMouseOut="presetRemoveHighlight(this)">example3</span></li>                <li><span class="presetListItem" onClick="setPreset('example4')" onMouseOver="presetHighlight(this)" onMouseOut="presetRemoveHighlight(this)">example4</span></li>                <li><span class="presetListItem" onClick="setPreset('example5')" onMouseOver="presetHighlight(this)" onMouseOut="presetRemoveHighlight(this)">example5</span></li>                <li><span class="presetListItem" onClick="setPreset('example6')" onMouseOver="presetHighlight(this)" onMouseOut="presetRemoveHighlight(this)">example6</span></li>                <li><span class="presetListItem" onClick="setPreset('example7')" onMouseOver="presetHighlight(this)" onMouseOut="presetRemoveHighlight(this)">example7</span></li>            </ul>

Here are the functions:

function presetHighlight(listItem){$(listItem).css('text-decoration', 'underline');} function presetRemoveHighlight(listItem){$(listItem).css('text-decoration', 'none');} function setPreset(chosenItem){setDefaults(chosenItem);$('#presetsListContainer').css('display', 'none');}

CSS:

.presetsListContainer{width: 150px;background: rgba(0, 0, 0, 0.5);position: absolute;top: 35px;right: 150px;margin: 2px;display: none;} .presetsList{font-family: Eurostile, Helvetica, sans-serif;color: #FFFFFF;list-style: none;margin: 2px;padding: 0px;} li{text-align: center;margin: 8px;} .presetListItem{cursor: pointer;text-decoration: none;}

  • Like 3
Link to comment
Share on other sites

This looks like jquery? If it's plain ol' JavaScript.. here's a way you can try to implement what I think you're trying to do:

<!doctype html><html><head><title>Costanza</title><script type="application/javascript">function presetHighlight(listItem){listItem.style.textDecoration = "underline";} function presetRemoveHighlight(listItem){listItem.style.textDecoration = "none";} function setPreset(chosenItem){chosenItem.style.display = "none";}</script><style type="text/css">.presetsListContainer{width: 150px;background: rgba(0, 0, 0, 0.5);position: absolute;top: 35px;right: 150px;margin: 2px;display: none;} .presetsList{font-family: Eurostile, Helvetica, sans-serif;color: #FFFFFF;list-style: none;margin: 2px;padding: 0px;} li{text-align: center;margin: 8px;} .presetListItem{cursor: pointer;text-decoration: none;} </style></head><body><ul class="presetsList">				<li><span class="presetListItem" onClick="setPreset(this)" onMouseOver="presetHighlight(this)" onMouseOut="presetRemoveHighlight(this)">example1</span></li>				<li><span class="presetListItem" onClick="setPreset(this)" onMouseOver="presetHighlight(this)" onMouseOut="presetRemoveHighlight(this)">example2</span></li>				<li><span class="presetListItem" onClick="setPreset(this)" onMouseOver="presetHighlight(this)" onMouseOut="presetRemoveHighlight(this)">example3</span></li>				<li><span class="presetListItem" onClick="setPreset(this)" onMouseOver="presetHighlight(this)" onMouseOut="presetRemoveHighlight(this)">example4</span></li>				<li><span class="presetListItem" onClick="setPreset(this)" onMouseOver="presetHighlight(this)" onMouseOut="presetRemoveHighlight(this)">example5</span></li>				<li><span class="presetListItem" onClick="setPreset(this)" onMouseOver="presetHighlight(this)" onMouseOut="presetRemoveHighlight(this)">example6</span></li>				<li><span class="presetListItem" onClick="setPreset(this)" onMouseOver="presetHighlight(this)" onMouseOut="presetRemoveHighlight(this)">example7</span></li>			</ul></body></html>

Edited by Don E
Link to comment
Share on other sites

Thanks for your reply, but that's really just the code I already have except it doesn't use jQuery. And unfortunately the problem seems to be that the onMouseOver/onmouseout events don't even begin which means that the code inside them isn't the problem, be it jQuery or anything else.

Link to comment
Share on other sites

The mouse over/out should (underline) work fine as long as you have links to jquery files, the pointer cursor only appears by default for anchor links only, any other element you would have to add 'cursor: pointer;' when used with hover. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script> whole code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/function presetHighlight(listItem){$(listItem).css('text-decoration', 'underline'); } function presetRemoveHighlight(listItem){$(listItem).css('text-decoration', 'none');} function setPreset(chosenItem){setDefaults(chosenItem);$('#presetsListContainer').css('display', 'none');}/*--*//*]]>*/</script>  <style type="text/css"> body {background-color:#666666;} .presetsListContainer{width: 150px;background: rgba(0, 0, 0, 0.5);position: absolute;top: 35px;right: 150px;margin: 2px;display: none;} .presetsList{font-family: Eurostile, Helvetica, sans-serif;color: #FFFFFF;list-style: none;margin: 2px;padding: 0px;} li{text-align: center;margin: 8px;} .presetListItem{cursor: pointer;text-decoration: none;}</style></head><body><ul class="presetsList">				<li><span class="presetListItem" onClick="setPreset('example1')" onMouseOver="presetHighlight(this)" onMouseOut="presetRemoveHighlight(this)">example1</span></li>				<li><span class="presetListItem" onClick="setPreset('example2')" onMouseOver="presetHighlight(this)" onMouseOut="presetRemoveHighlight(this)">example2</span></li>				<li><span class="presetListItem" onClick="setPreset('example3')" onMouseOver="presetHighlight(this)" onMouseOut="presetRemoveHighlight(this)">example3</span></li>				<li><span class="presetListItem" onClick="setPreset('example4')" onMouseOver="presetHighlight(this)" onMouseOut="presetRemoveHighlight(this)">example4</span></li>				<li><span class="presetListItem" onClick="setPreset('example5')" onMouseOver="presetHighlight(this)" onMouseOut="presetRemoveHighlight(this)">example5</span></li>				<li><span class="presetListItem" onClick="setPreset('example6')" onMouseOver="presetHighlight(this)" onMouseOut="presetRemoveHighlight(this)">example6</span></li>				<li><span class="presetListItem" onClick="setPreset('example7')" onMouseOver="presetHighlight(this)" onMouseOut="presetRemoveHighlight(this)">example7</span></li>			</ul> </body></html>

But why? use jquery to underline text when css can do that

.presetListItem {text-decoration:none;cursor: pointer;}   .presetListItem:hover {text-decoration:underline;}

Edited by dsonesuk
Link to comment
Share on other sites

I would also consider not having the events inline. if you're already using jquery, just use jquery to assign the event handlers as well, and keep it out of the markup. easier to maintain, and you won't have to assign an event handler to execute a function you defined. you can just assign that function right to the event handler and cut out the middle man.

Edited by thescientist
Link to comment
Share on other sites

Alright this is messed up... I tested it just now and it didn't work, THEN having made no other changes to my code, I added the hover CSS recommend by dsonesuk (to underline the span tag) and removed the onmouseover/onmouseout events. This weirdly caused the pointer to begin working but the underlining still would not. I then reverted it all back to how I had it and now both the pointer and underline are working. :blink: So problem solved... I think? I'll keep working on the rest of this site and see if it randomly breaks again.

Link to comment
Share on other sites

Sounds like it might have been a cache issue. Clearing the cache is one of the first things I do when a change I make doesn't seem to have any effect.
Yeah that's what I thought it seemed like too, but the thing is I clear my cache, cookies, and even history before every test to be sure I'm running it fresh. And I tested this many times and repeatedly cleared cache (is there such a thing as "too much" cache-clearing?) So I'll keep working and see if the issue crops up again. So far so good though.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...