Question

I have some listings. At present when page loads listing is showing like

Img 1
Test 1
Img 2
Test 2
Img 3
Test 3

Img is in <a> tag and test content is in <div> tag

What I need is, when I hover on the <div> I need to set background color to <a>. That means,

If I mouse hover on Test 1 a background color will add to Img 1,

If I mouse hover on Test 2 a background color will add to Img 2,

If I mouse hover on Test 3 a background color will add to Img 3,

How can I do that with the help of jquery?

In <div> tag there is data-id. In <a> tag there is data-tag-id.

$('.description').each(function() {
  var dataId = $(this).attr("id").split('-')[1];
  $(this).attr('data-id', dataId);
}).click(function() {
  console.log($(this).data('id'));
});


$('.area').each(function() {
  var dataId = $(this).attr("data-description-id").split('-')[1];
  $(this).attr('data-tag-id', dataId);
}).click(function() {
  console.log($(this).data('tag-id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure class="image_container">
  <img src="files/maier-energie-umwelt/produkte/phantom-ruehrwerke/Phantom-1400.jpg" alt="" width="738" height="800">
  <figcaption class="caption">
    <a class="area center-bg hasDescription" href="javascript:void(0)" title="Verschleißfester Propeller aus PA12" data-description-id="areaDesc-1" style="width: 6.775%;height: 18.75%;left: 14.228%;top: 1.25%;background-image: url(files/maier-energie-umwelt/layout/marker.png);" data-tag-id="1"></a>
    <div id="areaDesc-1" class="description invisible" data-id="1" style="display: block;">
      <p><strong>Test1</p>
    </div>

    <a class="area center-bg hasDescription" href="javascript:void(0)" title="Abgedeckte doppelte Gleitringdichtung" data-description-id="areaDesc-2" style="width: 6.775%;height: 18.75%;left: 25.745%;top: 21.875%;background-image: url(files/maier-energie-umwelt/layout/marker.png);" data-tag-id="2"></a>
    <div id="areaDesc-2" class="description invisible" data-id="2">
      <p>Test2</p>
    </div>

    <a class="area center-bg hasDescription" href="javascript:void(0)" title="Optimierte Schutzschelle aus Edelstahl" data-description-id="areaDesc-3" style="width: 6.775%;height: 18.75%;left: 27.778%;top: 49.375%;background-image: url(files/maier-energie-umwelt/layout/marker-bottom.png);" data-tag-id="3"></a>

    <div id="areaDesc-3" class="description invisible" data-id="3">
      <p>Test3</p>
    </div>
  </figcaption>
</figure>

Answer 1

您只需使用.hover()将.description div元素与.prev()结合使用，即可获取之前的a元素，然后更改其背景。

这应该是你的代码：

$('.description').hover(function() {
  $(this).prev('a').css('background', "#f99");
}, function() {
  $(this).prev('a').css('background', "");
});

<强>演示：

这是一个有效的演示片段：

＆＃13;

$('.description').hover(function() {
  $(this).prev('a').css('background', "#f99");
}, function() {
  $(this).prev('a').css('background', "");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure class="image_container">
  <img src="files/maier-energie-umwelt/produkte/phantom-ruehrwerke/Phantom-1400.jpg" alt="" width="100" height="100">
  <figcaption class="caption">
    <a class="area center-bg hasDescription" href="javascript:void(0)" title="Verschleißfester Propeller aus PA12" data-description-id="areaDesc-1" style="width: 6.775%;height: 18.75%;left: 14.228%;top: 1.25%;background-image: url(files/maier-energie-umwelt/layout/marker.png);"
      data-tag-id="1">Link 0</a>
    <div id="areaDesc-1" class="description invisible" data-id="1" style="display: block;">
      <p><strong>Test1</p>
    </div>

    <a class="area center-bg hasDescription" href="javascript:void(0)" title="Abgedeckte doppelte Gleitringdichtung" data-description-id="areaDesc-2" style="width: 6.775%;height: 18.75%;left: 25.745%;top: 21.875%;background-image: url(files/maier-energie-umwelt/layout/marker.png);" data-tag-id="2">Link 1</a>
    <div id="areaDesc-2" class="description invisible" data-id="2">
      <p>Test2</p>
    </div>

    <a class="area center-bg hasDescription" href="javascript:void(0)" title="Optimierte Schutzschelle aus Edelstahl" data-description-id="areaDesc-3" style="width: 6.775%;height: 18.75%;left: 27.778%;top: 49.375%;background-image: url(files/maier-energie-umwelt/layout/marker-bottom.png);" data-tag-id="3">Link 2</a>

    <div id="areaDesc-3" class="description invisible" data-id="3">
      <p>Test3</p>
    </div>
  </figcaption>
</figure>

＆＃13;

Answer 2

你可以试试这个：

$('.description').on("hover", function() {
  $(this).prev().css("background-color", "red");;
}, function() {
  $(this).prev().css("background-color", "none");;
});

Answer 3

尝试这样的事情

      $('[data-id]').hover(
         //executed when mouse is entering the object    
         function () {
                $("[data-tag-id=" + $(this).data('id') + "]").css('background', 'background-url-here');
            }, 
         //executed when mouse is leaving the object   
         function () {
                $("[data-tag-id=" + $(this).data('id') + "]").css('background', 'none');
            });

Answer 4

好吧，如果使用css兄弟选择器，你只能使用CSS获得结果。

让我们说我们有这个HTML：

GenericData

然后我们可以在css中使用它：

<div class="img">
  <img src="http://lorempixel.com/100/100/sports/1" />
</div>
<div class="content">
        <h3>Test 1</h3>
</div>


<div class="img">
  <img src="http://lorempixel.com/100/100/sports/2"/>
</div>
<div class="content">
        <h3>Test 2</h3>
</div>


<div class="img">
  <img src="http://lorempixel.com/100/100/sports/3"/>
</div>
<div class="content">
        <h3>Test 3</h3>
</div>

https://jsfiddle.net/emilvr/wxn8vpyj/1/

我们如何为<a> tag when I hover on </a> <div> <a> tag?

4 个答案: