Question

每当<li>元素悬停时，我需要有一个图标列表，这些图标会在壁板div中更改图像和标题，当没有任何东西悬停时会有一个默认图像（“i.png”每当用户光标离开<ul>时返回，这是html：

$("#brain").hover(function() {
        $("#brain img").css("opacity", "1");
        $("#exp-img").attr("src", "a.png");
        $("#icon-image-header").text("lorem");
      });
      $("#brain").mouseleave(function() {
        $("#brain img").css("opacity", "0.5");
      });
      $("#body").hover(function() {
        $("#body img").css("opacity", "1");
        $("#exp-img").attr("src", "b.png");
        $("#icon-image-header").text("ipsum");
      });
      $("#body").mouseleave(function() {
        $("#body img").css("opacity", "0.5");
      });
      $("#planning").hover(function() {
        $("#planning img").css("opacity", "1");
        $("#exp-img").attr("src", "c.png");
        $("#icon-image-header").text("dolor");
      });
      $("#planning").mouseleave(function() {
        $("#planning img").css("opacity", "0.5");
      });
      $("#pen").hover(function() {
        $("#pen img").css("opacity", "1");
        $("#exp-img").attr("src", "d.png");
        $("#icon-image-header").text("sit");
      });
      $("#pen").mouseleave(function() {
        $("#pen img").css("opacity", "0.5");
      });
      $("#front").hover(function() {
        $("#front img").css("opacity", "1");
        $("#exp-img").attr("src", "e.png");
        $("#icon-image-header").text("amet");
      });
      $("#front").mouseleave(function() {
        $("#front img").css("opacity", "0.5");
      });
      $("#pie").hover(function() {
        $("#pie img").css("opacity", "1");
        $("#exp-img").attr("src", "f.png");
        $("#icon-image-header").text("lorem");
      });
      $("#pie").mouseleave(function() {
        $("#pie img").css("opacity", "0.5");
      });
      $("#bulb").hover(function() {
        $("#bulb img").css("opacity", "1");
        $("#exp-img").attr("src", "g.png");
        $("#icon-image-header").text("ipsum");
      });
      $("#bulb").mouseleave(function() {
        $("#bulb img").css("opacity", "0.5");
      });
      $("#db").hover(function() {
        $("#db img").css("opacity", "1");
        $("#exp-img").attr("src", "h.png");
        $("#icon-image-header").text("dolor");
      });
      $("#db").mouseleave(function() {
        $("#db img").css("opacity", "0.5");
      });
      $("#skills-icons").mouseleave(function() {
        $("#icon-image-header").text("Lorem");
        $("#exp-img").attr("src", "i.png");
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="container">
  <div class="col-2" id="our-expertise-image">
    <div class="icon-image-container">
      <img src="i.png" alt="" id="exp-img">
    </div>
      <h1 id="icon-image-header">
        Lorem
      </h1>
  </div>
  <div class="col-2" id="our-expertise-icons">
    <h3 class="cat-header"><span>+</span>Lorem</h3>
    <h1>Lorem Ipsum Dolor</h1>
    <ul id="skills-icons">
      <li id="brain"><img src="brain-icon.png" alt=""></li>
      <li id="body"><img src="body-icon.png" alt=""></li>
      <li id="planning"><img src="planning-icon.png" alt=""></li>
      <li id="pen"><img src="pen-icon.png" alt=""></li>
      <li id="front"><img src="front-icon.png" alt=""></li>
      <li id="pie"><img src="piegraph-icon.png" alt=""></li>
      <li id="bulb"><img src="bulb-icon.png" alt=""></li>
      <li id="db"><img src="db-icon.png" alt=""></li>
    </ul>
  </div>
</article>

现在这实际上工作正常，但我想知道是否有更清洁的方法来做到这一点。我是jquery的初学者，但似乎很长。

Answer 1

您可以使用解决方案https://jsfiddle.net/9fczjsgu/

＆＃13;

var dic = {
  "brain" : {
    img: "a.png",
    text: "lorem"
  },
  "body" : {
  	img: "b.png",
    text: "ipsum"
  },
  "planning" : {
    img: "c.png",
    text: "dolor"
  },
  "pen" : {
    img: "d.png",
    text: "sit"
  },
  "front" : {
    img: "e.png",
    text: "amet"
  },
  "pie" : {
    img: "f.png",
    text: "lorem"
  },
  "bulb" : {
    img: "g.png",
    text: "ipsum"
  },
  "db" : {
    img: "h.png",
    text: "dolor"
  }
};

$("li").hover(function() {
  $(this).find("img").css("opacity", "1");
  $("#exp-img").attr("src", dic[$(this).attr('id').img]);
  $("#icon-image-header").text(dic[$(this).attr('id').img]);
}).mouseleave(function() {
  $(this).find("img").css("opacity", "0.5");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="container">
  <div class="col-2" id="our-expertise-image">
    <div class="icon-image-container">
      <img src="i.png" alt="" id="exp-img">
    </div>
      <h1 id="icon-image-header">
        Lorem
      </h1>
  </div>
  <div class="col-2" id="our-expertise-icons">
    <h3 class="cat-header"><span>+</span>Lorem</h3>
    <h1>Lorem Ipsum Dolor</h1>
    <ul id="skills-icons">
      <li id="brain"><img src="brain-icon.png" alt=""></li>
      <li id="body"><img src="body-icon.png" alt=""></li>
      <li id="planning"><img src="planning-icon.png" alt=""></li>
      <li id="pen"><img src="pen-icon.png" alt=""></li>
      <li id="front"><img src="front-icon.png" alt=""></li>
      <li id="pie"><img src="piegraph-icon.png" alt=""></li>
      <li id="bulb"><img src="bulb-icon.png" alt=""></li>
      <li id="db"><img src="db-icon.png" alt=""></li>
    </ul>
  </div>
</article>

＆＃13;

创建一个字典（JSON），其中id为关键字＆amp;它将以JSON与image＆amp;的形式再次包含价值text。

希望这会对你有所帮助。

jquery列表悬停改变方img

1 个答案: