[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1109
  • Last Modified:

Change style of current element onMouseOver

I have a various elements that when they are moused over I need another element to appear. However, I am doing this dynamically and all of the elements need the same id. This is the structure:

<div id="parent">
  <div id="divDrag">Drag Me</div>
</div>

These are created dynamically and there will be many. When they mouseover parent I need it to change the visibility of divDrag to visible and onMouseOut change it to hidden again. I can do this by stating the elements id directly.

onMouseOver="document.getElementById('divDrag').style.visibility='visible';" onMouseOut="document.getElementById('divDrag').style.visibility='hidden';"

But all the elements need to have the same id and I can't get the mouseover effect to work correctly when multiples have the same id.

Is there a  way to target the next div or the next div with a certain id? So the targeted next div with a certain id will receive the mouse events?

Please help me to solve this. Thank you in advance!!!!
<div id="blockMove" style="height:100px; width:400px;" onMouseOver="document.getElementById('divDrag').style.visibility='visible';" onMouseOut="document.getElementById('divDrag').style.visibility='hidden';">
	<div id="divDrag">Drag me</div>
</div>
 
<div id="blockMove" style="height:100px; width:400px;" onMouseOver="document.getElementById('divDrag').style.visibility='visible';" onMouseOut="document.getElementById('divDrag').style.visibility='hidden';">
	<div id="divDrag">Drag me</div>
</div>
 
<style type="text/css">#divDrag{background-color:#DBDBDB; height:20px; width:80%; cursor:move; visibility:hidden;}</style>

Open in new window

0
Shaye Larsen
Asked:
Shaye Larsen
  • 2
  • 2
1 Solution
 
quincydudeCommented:
Id should be unique in each html page. You do you have to put the divs in the same id? Changing them will simply solve the problem. If you want to identify a group of element, you can use the class attribute.
0
 
Shaye LarsenAuthor Commented:
Thank you for your response. Yes, for the functionality I need them to all be the same. Otherwise each time a new element is added I will have to dynamically create new styles, functions, etc. resluting in hundreds of styles and function.

This is a user interface where the user will be adding elements to a page. They can then drag there elements around and position them how they like them. All the parents need the same id, no problem. It is the div within it that also will need to retain the same id that is the problem.
0
 
quincydudeCommented:
For styling you can group elements with same styles using class, it should not be a problem.

may be one of the approach is you name the divs'd id like mydiv_1 to mydiv_10
so your javascript will crop the ending number and add 1 to it to look for mydiv_2 using getElementById()
0
 
sumitkchawlaCommented:
Try this :



<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<style>
.topDiv
{
  border:solid 1px BLACK;
  background:YELLOW;
  width:200px;
  height:100px;
}
 
.classHidden
{
  display:none;
}
 
.classShow
{
  display:block;
}
 
</style>
<script type="text/javascript" language="javascript" >
function mouseIn(obj)
{
  var divs = obj.getElementsByTagName("div");
  var count = 0;
  for(count=0;count<divs.length;count++) {
    divs[count].className = "classShow";
  }
}
 
 
function mouseOut(obj)
{
  var divs = obj.getElementsByTagName("div");
  var count = 0;
  for(count=0;count<divs.length;count++) {
    divs[count].className = "classHidden";
  }
 
}
 
</script>
 
<div class="topDiv" onMouseOver="mouseIn(this)" onMouseOut="mouseOut(this)">
  MOVE YOU MOUSE OVER HERE
  <div class="classHidden"> INNER </div>
</div>
 
 
</BODY>
</HTML>

Open in new window

0
 
Shaye LarsenAuthor Commented:
Perfect solution! Thanks a million!!!!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now