减少多重单元悬停的代码

Question

如何在不更改jQuery标记的情况下减少此代码？我应该使用数据属性吗？但我不知道怎样才能得到这个形象元素。下面是示例：https://jsfiddle.net/y277bavo/2/

$(".tlh-1, .tlb-1").hover(
  function() {
    $(".icon1-hover").css('display', 'block');
  },
  function() {
    $(".icon1-hover").css('display', 'none');
  });
$(".tlh-2, .tlb-2").hover(
  function() {
    $(".icon2-hover").css('display', 'block');
  },
  function() {
    $(".icon2-hover").css('display', 'none');
  });

​

<div class="row">
  <div class="block">
    <div class="head tlh-1">
      <h4>Lorem ipsum.</h4>
    </div>
    <div class="body tlb-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, facilis!.</div>
  </div>
  <p class="image-hover"><img class="icon1-hover" src="https://i.stack.imgur.com/F65tu.jpg?s=48&g=1" alt=""></p>
</div>
<div class="row">
  <div class="block">
    <div class="head tlh-2">
      <h4>Lorem ipsum.</h4>
    </div>
    <div class="body tlb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, facilis!.</div>
  </div>
  <p class="image-hover"><img class="icon2-hover" src="https://i.stack.imgur.com/F65tu.jpg?s=48&g=1" alt=""></p>
</div>

Answer 1

您为什么使用JS作为CSS用途？对于解决方案，您只需要CSS。删除您的JS并添加此CSS。我在你的jsFiddle上测试过它！

.row {
  display: inline-block;
  float: left;
  width: 50%;
}

[class ^= "tlh-"],[class ^= "tlh-"] {
    [class $= "-hover"] {
        display: none;
    }
}

[class ^= "tlh-"]:hover,[class ^= "tlh-"]:hover {
    [class $= "-hover"] {
        display: block;
    }
}

Answer 2

可以将DOM元素关系用作

$(".block").hover(function() {
    $(this).closest('.row').find('.image-hover img').show();
},
function() {
    $(this).closest('.row').find('.image-hover img').hide();
});

​

$(".block").hover(function() {
    $(this).closest('.row').find('.image-hover img').show();
  },
  function() {
    $(this).closest('.row').find('.image-hover img').hide();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="block">
    <div class="head tlh-1">
      <h4>Lorem ipsum.</h4>
    </div>
    <div class="body tlb-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, facilis!.</div>
  </div>
  <p class="image-hover">
    <img class="icon1-hover" src="https://i.stack.imgur.com/F65tu.jpg?s=48&g=1" alt="">
  </p>
</div>
<div class="row">
  <div class="block">
    <div class="head tlh-2">
      <h4>Lorem ipsum.</h4>
    </div>
    <div class="body tlb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, facilis!.</div>
  </div>
  <p class="image-hover">
    <img class="icon2-hover" src="https://i.stack.imgur.com/F65tu.jpg?s=48&g=1" alt="">
  </p>
</div>

​

Answer 3

您可以如下所示更改jQuery。更新小提琴

$(".head").hover(
  function() {
    $(this).parents('.row').find('img').show();
  },
  function() {
    $(this).parents('.row').find('img').hide();
  });