Question

我发现了许多类似的帖子；但是，没有一个与我的问题相同，因此建议的脚本不起作用。这是页面布局：


    <div id="div_block-7-3587" class="ct-div-block">
        <h2 id="headline-8-3587" class="ct-headline">Great Tires Live Here</h2>
    </div>
    <div id="div_block-14-3587" class="ct-div-block">
        <h2 id="headline-15-3587" class="ct-headline">All-day, Everyday, Durability</h2>
    </div>
    <div id="div_block-16-3587" class="ct-div-block">
        <h2 id="headline-17-3587" class="ct-headline">Bringing Joy to the Outdoors</h2>
    </div>
    <div id="div_block-19-3587" class="ct-div-block">
        <h2 id="headline-20-3587" class="ct-headline">More Than Just Hitting Balls</h2>
    </div>
    <div id="div_block-22-3587" class="ct-div-block">
        <h2 id="headline-23-3587" class="ct-headline">Options for Every Need</h2>
    </div>
    <div id="div_block-25-3587" class="ct-div-block">
        <h2 id="headline-26-3587" class="ct-headline">Expanding Human Powered Transportation</h2>
    </div>

    <div id="new_columns-73-3587" class="ct-new-columns">
        <a id="div_block-50-3587" class="ct-link" href="./product-category/automotive/" target="_self">
            <img id="image-54-3587" alt="hover swap passenger tire image" src="./Hover Swap Test Page - DURO Tires_files/DTire_Hover_Auto.png" class="ct-image">
            <h3 id="headline-55-3587" class="ct-headline">Automotive</h3>
        </a>
        <a id="div_block-66-3587" class="ct-link" href="./product-category/powersports/" target="_self">
            <img id="image-67-3587" alt="hover swap Psports tire image" src="./Hover Swap Test Page - DURO Tires_files/DTire_Hover_Psport.png" class="ct-image">
            <h3 id="headline-68-3587" class="ct-headline">Powersports<br></h3>
        </a>
        <a id="div_block-63-3587" class="ct-link" href="./product-category/golf-and-light-utility/" target="_self">
            <img id="image-64-3587" alt="hover swap golf category tire image" src="./Hover Swap Test Page - DURO Tires_files/DTire_Hover_Golf.png" class="ct-image">
            <h3 id="headline-65-3587" class="ct-headline">Golf and Light Utility</h3>
        </a>
        <a id="div_block-60-3587" class="ct-link" href="./product-category/specialty/" target="_self">
            <img id="image-61-3587" alt="hover swap specialty tire image" src="./Hover Swap Test Page - DURO Tires_files/DTire_Hover_Spec.png" class="ct-image">
            <h3 id="headline-62-3587" class="ct-headline">Specialty</h3>
        </a>
        <a id="div_block-57-3587" class="ct-link" href="./tires/bicycle-tires/" target="_self">
            <img id="image-58-3587" alt="hover swap bicycle tire image" src="./Hover Swap Test Page - DURO Tires_files/DTire_Hover_Bike.png" class="ct-image">
            <h3 id="headline-59-3587" class="ct-headline">Bicycle</h3>
        </a>
    </div>

这分为两部分：第一节是div块，其中包含背景图像和一些文本。仅第一个div块可见。其余显示：无。 2.第二部分是一行链接，每个链接包含一个图像和文本。

目标：将鼠标悬停在一个div（轮胎图像）上会隐藏显示的英雄图像div，并将其替换为相应的隐藏英雄图像div。例如：将鼠标悬停在id =“ div_block-50-3587”上会使div_block-7-3587更改为display：none，并使div_block-14-3587可见。

我只尝试了CSS，除非切换了这些CSS，否则CSS不会起作用，因此链接位于英雄图像之前。这很痛苦，因为它会影响响应式布局。因此，我希望使用脚本选项。但是，我的所有尝试，包括这一尝试都没有成功。

        $(function(){
   $("#div_block-50-3587").hover(
        function(){
            $("#div_block-7-3587").css('display','none');
            $("#div_block-14-3587").css('display','block');
        },
        function(){
            $("#div_block-7-3587").css('display','block');
            $("#div_block-14-3587").css('display','none');
        }
    );
});

因此，我来找您寻求建议的方向。

悬停div影响多个div，但不影响兄弟姐妹，孩子或父母

0 个答案: