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

Question

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

<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

您需要在该字段图像 div 中包含链接。在这里 fiddle :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);
    }
  );