Javascript从给定的Javascript对象参数访问嵌套的HTML元素

我正在尝试编写一个小脚本，当鼠标移过/移出div时，它会自动显示/隐藏div的内容。我想做的是让标题可见，当有人将鼠标移到标题上时，可以看到更多的文本

问题是我只想显示/隐藏任何给定元素的特定内部div，而不是隐藏整个元素。我有很多元素，所以为每一个元素手工编写Java脚本有点愚蠢

我的HTML代码如下所示：

<li id="job1" onmouseover ="div2mouseover(this)"  onmouseout="div2mouseout(this)">
    <div style = "display:none" id="jobDescription">
        <p> Blablabla</p>
     </div>
<li>

<script type="text/javascript">

   function div2mouseover(obj) 
   {
        //obj.style.display = "none"; //I can reach that
        obj.getElementById("jobDescription").style.display = "initial"; //I can't reach that
   }
 </script>

但是用这种方法，我必须为我的所有工作元素编写一个脚本，这是非常多的。

---

任何建议？？？

您也可以根据元素的位置引用元素

例如，如果要显示的div始终是“hover”li中的第一个div，则可以执行以下操作

function div2mouseover(obj) {
  var div = obj.getElementsByTagName("div")[0];
  div.style.display = "initial";
}

---

如果你这样做的话，在div中不需要任何ID。

朋友的评论解决了我的问题。。（也许其他答案也适用）

---

ID应该是唯一的。改为使用类，并使用obj.querySelector（“.classNameHere”）–nnnn 12分钟前

---

谢谢你们

ID应该是唯一的。改用一个类，并使用

obj.querySelector（“.classNameHere”）

O男人（或女人），你是伟大的！！工作得很有魅力。。谢谢！

function div2mouseover(obj) {
  var div = obj.getElementsByTagName("div")[0];
  div.style.display = "initial";
}