我想用最少的代码制作多个鼠标悬停功能

Question

我有10个链接，并且每个链接都不相同。我希望当用户将鼠标悬停在它们上面时，div的背景图像会发生变化，并在链接顶部显示淡入淡出的动画提示文字。

我已经尝试使用JS来实现几个功能，并且可以正常工作，但是它的代码很多，而且大多是重复的。我想通过所有这些无用的代码找到一个很好的捷径。

document.getElementById("d1").onmouseover = function() {
  mouseOver1()
};
document.getElementById("d2").onmouseover = function() {
  mouseOver2()
};
document.getElementById("d3").onmouseover = function() {
  mouseOver3()
};
document.getElementById("d1").onmouseout = function() {
  mouseOut1()
};
document.getElementById("d2").onmouseout = function() {
  mouseOut2()
};
document.getElementById("d3").onmouseout = function() {
  mouseOut3()
};

function mouseOver1() {
  document.getElementById("dogs").style.background = "blue";
  document.getElementById("tooltiptext1").style.visibility = "visible";
}

function mouseOut1() {
  document.getElementById("dogs").style.background = "black";
  document.getElementById("tooltiptext1").style.visibility = "hidden";
}

function mouseOver2() {
  document.getElementById("dogs").style.background = "green";
  document.getElementById("tooltiptext2").style.visibility = "visible";
}

function mouseOut2() {
  document.getElementById("dogs").style.background = "black";
  document.getElementById("tooltiptext2").style.visibility = "hidden";
}

function mouseOver3() {
  document.getElementById("dogs").style.background = "red";
  document.getElementById("tooltiptext3").style.visibility = "visible";
}

function mouseOut3() {
  document.getElementById("dogs").style.background = "black";
  document.getElementById("tooltiptext3").style.visibility = "hidden";
}

#dogs {
  float: right;
  margin-top: 5%;
  background: black;
  width: 150px;
  height: 150px;
}

#d-list {
  color: white;
  direction: ltr;
  float: right;
  width: 60%;
  height: 60%;
}

#tooltiptext1,
#tooltiptext2,
#tooltiptext3 {
  color: black;
  background-color: gray;
  width: 120px;
  height: 30px;
  border-radius: 6px;
  text-align: center;
  padding-top: 5px;
  visibility: hidden;
}

<div id="animals">
  <div id="dogs"></div>
  <div id="d-list">
    <pre style="font-size:22px; color:darkorange">dogs</pre><br />

    <pre><a href="#burger" id="d1">white Husky</a></pre>
    <p id="tooltiptext1">Tooltip text1</p>

    <pre><a href="#burger" id="d2">black Bull</a></pre>
    <p id="tooltiptext2">Tooltip text2</p>

    <pre><a href="#burger" id="d3">brown Rex</a></pre>
    <p id="tooltiptext3">Tooltip text3</p>
  </div>
</div>

请记住，所有链接都将更改相同的外部div对象，其想法是更改该div的背景图像，并且工具提示应显示在链接顶部。...所以， 有什么想法吗？

Answer 1

已更新

此答案是在编辑问题以显示预期的标记/样式之前以及包括所有详细信息之前编写的。该代码已更新为可以使用该结构。

---

我认为最简单的事情就是创建一个配置对象以详细说明各个位，然后使用通用代码进行其余操作。这是一种方法：

const configs = [
  ['d1', 'tooltiptext1', 'blue'], 
  ['d2', 'tooltiptext2', 'green'],
  ['d3', 'tooltiptext3', 'red'],
];

configs.forEach(([id, tt, color]) => {
  const dogs = document.getElementById('dogs');
  const el = document.getElementById(id);
  const tip = document.getElementById(tt);
  el.onmouseover = (evt) => {
    dogs.style.background = color
    tip.style.visibility = "visible";
  }
  el.onmouseout = (evt) => {
    dogs.style.background = "black";
    tip.style.visibility = "hidden";
  }
})

#dogs{float:right;margin-top:5%;background:#000;width:150px;height:150px}#d-list{color:#fff;direction:ltr;float:right;width:60%;height:60%}#tooltiptext1,#tooltiptext2,#tooltiptext3{color:#000;background-color:gray;width:120px;height:30px;border-radius:6px;text-align:center;padding-top:5px;visibility:hidden}

<div id="animals"> <div id="dogs"></div><div id="d-list"> <pre style="font-size:22px; color:darkorange">dogs</pre><br/> <pre><a href="#burger" id="d1">white Husky</a></pre> <p id="tooltiptext1">Tooltip text1</p><pre><a href="#burger" id="d2">black Bull</a></pre> <p id="tooltiptext2">Tooltip text2</p><pre><a href="#burger" id="d3">brown Rex</a></pre> <p id="tooltiptext3">Tooltip text3</p></div></div>

显然，您可以非常轻松地用新行扩展它。而且，如果您想添加更多变化的属性，则可以使行更长。如果您需要为每个列表添加太多属性，则数组可能会变得难以阅读，并且最好切换到{id1: 'demo', id2: 'dem', color: 'blue} with the corresponding change to the parameters in the forEach callback. (That is, replacing configs.forEach（（ [id1，id2，color]）=> {with configs.forEach（（{{id1，id2，color}）=> {`。）但是只有三个参数，短数组看起来更干净。

---

基于我的虚构标记的旧代码段。

const configs = [
  ['demo', 'dem', 'blue'], 
  ['dd', 'dem1', 'green']
];

configs.forEach(([id1, id2, color]) => {
  const a = document.getElementById(id1)
  const b = document.getElementById(id2)
  a.onmouseover = (evt) => {
    a.style.background = color
    b.style.visibility = "visible";
  }
  a.onmouseout = (evt) => {
    a.style.background = "black";
    b.style.visibility = "hidden";
  }
})

div {width: 50px; height: 50px; float: left; margin: 10px; background: black; border: 1px solid #666; color: red; padding: 10px; text-align: center}
#dem , #dem1{visibility:hidden;}

<div id="demo">demo</div>
<div id="dem">dem</div>
<div id="dd">dd</div>
<div id="dem1">dem1</div>

Answer 2

我看到=>零Javascript的方式：

div[data-info] {
  display: inline-block;
  margin:80px 20px 0 0;
  border:1px solid red;
  padding: 10px 20px;
  position: relative;
}
div[data-bg=blue]:hover {
  background-color: blue;
  color: red;
}
div[data-bg=green]:hover {
  background-color: green;
  color: red;
}
div[data-info]:hover:after {
  background: #333;
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;
  bottom: 46px;
  color: #fff;
  content: attr(data-info);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  min-width: 120px;
  max-width: 220px;
}
div[data-info]:hover:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 6px 6px 0px 6px;
  bottom: 40px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}

<div data-info="Tooltip for A Tooltip for A" data-bg="blue">with Tooltip CSS3 A</div>
<div data-info="Tooltip for B" data-bg="green" >with Tooltip CSS3 B</div>

Answer 3

编辑：添加了动画请求。 当使用相似的功能操纵多个元素时，通过使用类在脚本中完成CSS几乎总是更好的方法，因此我在这里使用了它。与其添加一些复杂的逻辑，我只是​​为颜色添加了数据属性-现在，它也适用于您希望添加的任何新元素。

我确实发现您的标记的选择有些奇怪，并且会做不同的事情，但这并不是上述问题的一部分。

我冒昧地从您的style元素中删除了dogs属性，并将它放在CSS中，因为它似乎属于该属性，并且混合使用了标记和CSS可能会更难于维护时间，并将所有样式都放在一个地方。

由于您使用jQuery对DID进行了标记，因此下面是一个示例。

$(function() {
  $('#d-list').on('mouseenter', 'a', function(event) {
    $('#dogs').css('backgroundColor', $(this).data('colorin'));
    $(this).parent().next('.tooltip').animate({
      opacity: 1
    });
  }).on('mouseleave', 'a', function(event) {
    $('#dogs').css('backgroundColor', $(this).data('colorout'));
    $(this).parent().next('.tooltip').animate({
      opacity: 0
    });
  });
});

#dogs {
  float: right;
  margin-top: 5%;
  background: black;
  width: 150px;
  height: 150px;
}

#d-list {
  color: white;
  direction: ltr;
  float: right;
  width: 60%;
  height: 60%;
}

.dog-header {
  font-size: 22px;
  color: darkorange;
  margin-bottom: 2em;
}

.tooltip {
  color: black;
  background-color: gray;
  width: 120px;
  height: 30px;
  border-radius: 6px;
  text-align: center;
  padding-top: 5px;
  opacity: 0;
  position:relative;
  top:-4.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="animals">
  <div id="dogs"></div>
  <div id="d-list">
    <pre class="dog-header">dogs</pre>
    <pre><a href="#burger" id="d1" data-colorin="blue" data-colorout="black">white Husky</a></pre>
    <p id="tooltiptext1" class="tooltip">Tooltip text1</p>
    <pre><a href="#burger" id="d2" data-colorin="green" data-colorout="black">black Bull</a></pre>
    <p id="tooltiptext2" class="tooltip">Tooltip text2</p>
    <pre><a href="#burger" id="d3" data-colorin="red" data-colorout="black">brown Rex</a></pre>
    <p id="tooltiptext3" class="tooltip">Tooltip text3</p>
  </div>
</div>