如何通过css在html中访问其父级兄弟的子元素答案

【问题标题】：How to access child element of sibling of its parent in html by css如何通过css在html中访问其父级兄弟的子元素
【发布时间】：2016-03-11 06:57:35
【问题描述】：

谁能告诉我如何访问当前属性的父元素的同级元素的子元素？

<div class="views-field views-field-field-mobile-service-new-image">
    <div class="field-content">
        <img typeof="foaf:Image" src="image1.png" width="55" height="55" alt="" />
    </div>
</div>  
<div class="views-field views-field-view-node">
    <span class="field-content">
        <a href="#" class="colorbox-node" data-inner-width="650" data-inner-height="450">
            <img typeof="foaf:Image" src="image2.png" width="55" height="55" alt="" />
        </a>
    </span>
</div>

如何在第一个 div 的子类字段内容悬停时访问其他 div 中的图像

【问题讨论】：

stackoverflow.com/questions/9198327/… , stackoverflow.com/questions/18352367/…，这些链接可能会有所帮助

标签： html css drupal

【解决方案1】：

是不是，当您将鼠标悬停在一个 div 的图像上时，第二个 div 图像应该被第一个 div 的 img 替换？

【讨论】：

【解决方案2】：

如果我理解你的话，你不能用 CSS 做到这一点，但你可以用 JS 做到这一点，就像这样：

    $('.views-field-view-node img').hover(function() {
        var $yourImage = $(this).closest('.views-field-view-node')
            .parent().find('.views-field-field-mobile-service-new-image img').addClass('hover');
    }, function() {
        var $yourImage = $(this).closest('.views-field-view-node')
            .parent().find('.views-field-field-mobile-service-new-image img').removeClass('hover');
    });

这只是一个例子，如果你愿意，你可以改进我的代码，让它变得更好。

【讨论】：