Jump to content

onmouseover but not if over this?


wongadob
 Share

Recommended Posts

Imagine a list of facebook posts. Within those post are a number of elements that are clickable - lets say like and reply for example. I am using a cursor based system so i need to be able to highlight the main message, then the like and then the reply. But the like and the reply are contained in the same div as the actual message (a big container div) I need to change the background of each element as it passes over, I have to use onmouseover as they are not form input elements so I believe I can't use onfocus. But when I put the cursor over the like icon I want the background colour of the main message to become unhighlighted. Currently I have onmouseover and onmouseout events on each element. Is there any way to say on mouse over this element, unhighlight that element (even though the mouse is technically still over it) and still have it return to being highlighted when the mouse is off the like element? Any help much appreciated etc... wongadob

Edited by wongadob
Link to comment
Share on other sites

Give the "big container" a default background color (e.g gray) and then an ID (eg 'bigOne'), then do something like this or use a function instead.

<a href="#" onmouseover="document.getElementById('bigOne').style.backgroundColor='#ccc'" onmouseout="document.getElementById('bigOne').style.backgroundColor='gray'">Like</a>

Edited by CodeName
Link to comment
Share on other sites

I will try to change it using the ID, but I thought maybe the system would auto change it back since technically the mouse is still over it. I can't use hover as it does not work with the system I am using Webworks for Blackberry web apps Thanks Wongadob

Link to comment
Share on other sites

Also not sure how to access the ID as it is in a knockout.js for each tempate. i.e. it generates many items of the same div. I tried adding an ID thinking it might add a number suffix but it doesn't. I tend to use class to identify for CSS but that does not matter because they all have the same CSS rules, but of course the onmouseover is specific to the one div. Wongadob

Link to comment
Share on other sites

As long as you can ensure that "this" is refering to the element you want. I'm always wary of using "this" in any context.Normally in an event, you'll pass the event object as a function parameter and access the current element as [eventobject].target or [eventobject].srcElement for Internet Explorer. Internet Explorer has a global window.event object rather than a function parameter.

Link to comment
Share on other sites

Hmm not working - Here is my code

<div class = "messageitem" id = "thrdmes" x-blackberry-focusable="true" onmouseover="style.backgroundColor='#880000';" onmouseout="style.backgroundColor='#ffffff';" >	  <div class="picture" data-bind="html: picurl"></div>	 	  <div class="textpart">	   <div class="mi_name" data-bind = "click: initMemberProfile.bind($data, userID())" x-blackberry-focusable="true" onmouseover="style.color='#444444'; this.style.backgroundColor='#ff0000'; this.parentNode.parentNode.style.backgroundColor='#00ff00';" onmouseout="style.color='#16509e';this.parentNode.parentNode.style.backgroundColor='#880000';"><p data-bind = "text: user"></p></div>	   <div data-bind = "html: readicon" ></div>

I did not put the rest of the div in here because it goes on to do all sorts of other fields I did not want to confuse things., This is the definition from the div I want to access - messageitem to the element I want to highight, but unhighlight main messahe Thanks

Link to comment
Share on other sites

You have some attributes that i dont even understand. <div ...onmouseover="style.color='#****'; this.parentNode..."...></div> What is the use of the part marked with red? Are you trying to refrence the element itself or what? If no reason, then it should not be there in both onmouseover/onmouseout in the first place, but if you are trying to refrence the element itself, then add "this" to it (e.g. this.style.color='#444444').

Edited by CodeName
Link to comment
Share on other sites

Yeah I was missing the 'this.' But that does not solve the problem. Interestingly the missing this. did not seem to make any difference. Maybe it assumes this. if it is part of element. Yes I am accessing the element itself in this instance. I make the element itself have a red background (this is test to show navigation is working) but I also want to access the 'parent.parent' element to switch its red background off! Thanks

Link to comment
Share on other sites

Putting "this" matters. If you do not put it, the program will look for a global variable called "style" and won't find it. Try this again and show the exact code you're using in the event handler. I can't see how it could fail unless it was implemented wrong.

Link to comment
Share on other sites

OK here it is

	 <div class = "messageitem"  x-blackberry-focusable="true" onmouseover="style.backgroundColor='#880000';" onmouseout="style.backgroundColor='#ffffff';" data-bind = "click: showthread.bind($data, thread())">	  <div class="picture" data-bind="html: picurl"></div>	 	  <div class="textpart">	   <div class="mi_name" data-bind = "click: initMemberProfile.bind($data, userID())"	    x-blackberry-focusable = "true"	    onmouseover = "this.style.color='#444444'; this.style.backgroundColor='#ff0000'; this.parentNode.parentNode.style.backgroundColor='#00ff00';"	    onmouseout = "this.style.color='#16509e'; this.style.backgroundColor='transparent'; this.parentNode.parentNode.style.backgroundColor='#880000';">	    <p data-bind = "text: user"></p>	   </div>

Link to comment
Share on other sites

OK so made that change and do difference

<div class = "messageitem"  x-blackberry-focusable="true" onmouseover="this.style.backgroundColor='#880000';" onmouseout="this.style.backgroundColor='#ffffff';" data-bind = "click: showthread.bind($data, thread())">	  <div class="picture" data-bind="html: picurl"></div>	 	  <div class="textpart">	   <div class="mi_name" data-bind = "click: initMemberProfile.bind($data, userID())"	    x-blackberry-focusable = "true"	    onmouseover = "this.style.color='#444444'; this.style.backgroundColor='#ff0000'; this.parentNode.parentNode.style.backgroundColor='#00ff00';"	    onmouseout = "this.style.color='#16509e'; this.style.backgroundColor='transparent'; this.parentNode.parentNode.style.backgroundColor='#880000';">	    <p data-bind = "text: user"></p>	   </div>	   <div data-bind = "html: readicon" ></div>	 	  	   <div class = "groupline" data-bind="html: viagroup"></div>

same deal the main message always stays highlighted.

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...