Question

我在这里遇到一些问题：一个是在jsfiddle中重现这个问题，因为我似乎无法让鼠标悬停动作正常工作。我遇到的实际问题是，在jQuery告诉css降低图像的不透明度后，'field-more'link'内容中的链接不会出现。

<div class="views-field views-field-field-member-image">        
    <div class="field-content">
        <div class="field-more-link" >
            <div class="field-name"><a href="/team-member/darrell-smith">Darrell Smith</a></div>
            <div class="field-position">Instrument Maker</div>
            <div class="field-general-position" style="display: none;">Associates</div>
            <div class="field-project-name"><a href="google.com/tags/project">IceCube</a></div>
            <div class="field-phone"></div>
            <div class="field-email">dsmith@whatever.edu</div>
    </div>

<div class="field-image" style="display:inline;">
    <img typeof="foaf:Image" src="http://i.imgur.com/6wGdB52.jpg" alt="Darrell Smith" ></img>
</div>

下面是我想要叠加层的样子（但.field-name和.field-project-name中的链接不可点击，例如“Darrell Smith”和“IceCube”应该是链接）

http://i.imgur.com/IRsHDgL.png

这是我在jsfiddle上走了多远（无法让jquery工作）

http://jsfiddle.net/9d43y2tn/4/

我希望这是足够的信息！

Answer 1

您需要在该field-image div中拥有链接。在这里小提琴：http://jsfiddle.net/9d43y2tn/6/

<div class="views-field views-field-field-member-image">        
    <div class="field-content">


<div class="field-image">
    <img typeof="foaf:Image" src="http://i.imgur.com/6wGdB52.jpg" alt="Darrell Smith" ></img>
    <div class="field-more-link" >
            <div class="field-name"><a href="/team-member/darrell-smith">Darrell Smith</a></div>
            <div class="field-position">Instrument Maker</div>
            <div class="field-general-position" style="display: none;">Associates</div>
            <div class="field-project-name"><a href="google.com/tags/project">IceCube</a></div>
              <div class="field-phone"></div>
              <div class="field-email">dsmith@whatever.edu</div>
    </div>
</div>

jQuery略有修改：

      $('.field-image').hover(
    function () {
      $('.field-image').find('img').fadeTo(1000, .3);
      $('.field-more-link').show(1);
    },
    function () {
      $('.field-more-link').hide();
      $('.field-image').find('img').fadeTo(100, 1);
    }
  );

Answer 2

这里真正的问题是，虽然一旦它的不透明度发生变化，链接就会出现在图像前面，但实际上图像仍然与它们重叠。这可以通过将链接的z-index设置为比图片（例如2）更高的数字来修复，但这会立即导致另一个问题：当您将鼠标悬停在链接上时，不再考虑图片＆＃34 ;盘旋＆＃34;它渐渐消失了。

因此，我提供了一个非常简单的解决方案：使用您的jquery更改您的目标。当您将鼠标悬停在图像上时，不要改变图像的不透明度，而是使包含链接的div与其后面的图像大小相同，并在将鼠标悬停在容器div上时导致图像不透明度发生变化。因此，不要$(.field-image)，而是$(.field-content)。

  $('.field-content').hover(
    function () {
      $('.field-image').find('img').fadeTo(1000, .3);
      $('.field-more-link').show(1);
    },
    function () {
      $('.field-more-link').hide();
      $('.field-image').find('img').fadeTo(100, 1);
    }
  );

Here is working example

Answer 3

试试这个

 $('.field-image').hover(
        function () {

          $('.field-image').find('img').fadeTo(1000, .3);
          $('.field-more-link').show(1);
        },
        function () {
          $('.field-more-link').hide();
          $('.field-image').find('img').fadeTo(100, 1);
        }
      );

图像悬停时不透明度降低会从文本中删除链接

3 个答案: