Jump to content

Onmouseover In Span Tags Doesn't Execute

Costanza

By Costanza
in JavaScript

Recommended Posts

Costanza Newbie

Costanza

Posted
Posted

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;}

Link to comment
Share on other sites
Don E Invested Member

Don E

Posted
Posted

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>

Link to comment
Share on other sites
Costanza Newbie

Costanza

Posted
  • Author
Posted

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
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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;}

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

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.

Link to comment
Share on other sites
Costanza Newbie

Costanza

Posted
  • Author
Posted

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
Costanza Newbie

Costanza

Posted
  • Author
Posted
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

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...