Question

我上周发布了此内容，并尝试了所有内容，但仍无法正常运行。我将发布指向我的代码笔的链接（图像未加载，因此您不会看到它，但是您可以签出代码并查看我弄乱了什么）最后，我试图将鼠标悬停在#market上，它将colc（或与此相关的任何col）中的内容更改为其他图像。在头上，您将看到我的尝试，但是没有用。感谢您提供任何帮助。：）

https://codepen.io/callum-mcleod/pen/rRwRmm

    <script>

$('#market').hover(function () {
  $('#colc').css('content', 'url("_img/images/blue3.png")');
});

Answer 1

您可以使用jQuery来实现。

var imageUrl = "_img/images/blue3.png";
$("#market,#graphic,#web").on("hover",function(){
  $('#colc,#colb,#cola').css('background-image', 'url(' + imageUrl + ')');
});

Answer 2

您的问题与JS或Jquery无关。首先，content: url("_img/images/blue1.png");阻止了任何内容显示在colc div中。然后，应添加一些内容使其可显示或显式设置元素的宽度和高度。
最后一点：也许，最好使用background属性设置背景图片，而不要使用content
PS链接也应该有效

Answer 3

给出HTML布局，该布局取自链接到codepen片段：

<div class='rowmonitor'>
    <div id='cola'></div>
    <div id='colb'></div>
    <div id='colc'></div>   
</div>
<div class='rowblock'>
    <a href='graphic.html'>
        <div id='graphic'></div>
    </a>
    <a href='web.html'>
        <div id='web'></div>
    </a>
    <a href='market.html'>
        <div id='market'></div>
    </a>
</div>

在pen的CSS中

#market:hover ~ #colc

您发现，此选择器不适用于您拥有的HTML结构。没有previous sibling类型选择器-~用于访问以下元素。要完成背景图片的切换（奇怪地使用content属性而不是background-image），您需要使用某种风格的javascript。以下演示使用了普通的javascript，可能会（也可能不会）提供帮助-应该易于修改以使用您的图片，而不是来自互联网的图片。

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Change DIV element content on hover over another element</title>
        <style>
            body *{display:block;box-sizing:border-box;}
            .rowmonitor,
            .rowblock{width:50%;float:left;clear:none;margin:0;padding:0;}

            .rowmonitor > div,
            .rowblock > a{width:33%;float:none;clear:none;margin:1rem; padding:0.25rem;}


            .rowblock > a > div{padding:1rem;width:100%;height:3rem;}

            /* randomly selected source images */
            #cola{content:url(https://i.pinimg.com/originals/24/fd/a5/24fda5fb3317da38db13209cfd2651b9.gif)}
            #colb{content:url(https://cdn.shopify.com/s/files/1/0094/5691/0395/t/5/assets/LOGO_belif_200_50_800x800.png?15542124892649134758);}
            #colc{content:url(https://mosaic01.ztat.net/nvg/media/brandxl/3ea6e361-fada-43bd-9a28-368f176e6dcd.jpg);}

            /* more randomly selected background images */
            #graphic{background:url(https://www.micahjtphotos.com/img/s/v-2/p3109013942-11.jpg)}
            #web{background:url(https://www.countryside-trust.org.uk/userfiles/events/images/blue_moon_-_cockington_middle_lake_1.jpg?w=200&h=100&zc=1)}
            #market{background:url(https://www.tbhpartnership.org.uk/content/uploads/2016/09/EnglemerePond-200x100.jpg)}

            .rowblock > a > div{background-size:100%!important;background-repeat:no-repeat!important;background-position:center}
        </style>
        <script>
            document.addEventListener('DOMContentLoaded', e=>{

                let matrix={
                    cola:{
                        over:'https://i2.wp.com/www.sphk.org/wordpress/wp-content/uploads/2018/01/the-river.jpg?fit=300%2C100&ssl=1',
                        out:''
                    },
                    colb:{
                        over:'https://render.fineartamerica.com/images/rendered/search/poster/images-medium-5/karst-landscape-along-the-river-li-panoramic-images.jpg',
                        out:''
                    },
                    colc:{
                        over:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsFI7Ra8KNFWCAr_kEXEkrK9Z1hYOK0Hm8WVNno7b5X3glATzo',
                        out:''
                    }
                };

                /* get reference to the targets whose background will be changed */
                let cols=Array.prototype.slice.call( document.querySelectorAll('.rowmonitor > div') );

                /* further populate matrix with initial content images */
                cols.forEach( function( div ){
                    /* this will store: url( https://www.example.com/img.jpg ) */
                    matrix[ this.id ]=getComputedStyle( div ).content;
                })

                /* assign event listeners to each source rowblock > a element */
                Array.prototype.slice.call( document.querySelectorAll('.rowblock > a') ).forEach( a => {

                    /* change the images on rollover */
                    a.addEventListener( 'mouseover', evt=>{
                        cols.forEach( div=>{
                            /* explicitly set the url property */
                            div.style.content='url(' + matrix[ div.id ].over + ')';
                        });
                    });

                    /* restore the images on rollout */
                    a.addEventListener( 'mouseout', evt=>{
                        cols.forEach( div=>{
                            /* as we stored the url property can set directly */
                            div.style.content=matrix[ div.id ].out;
                        });
                    });
                });
            });
        </script>
    </head>
    <body>

        <!-- other html content -->


        <div class='rowmonitor'>
            <div id='cola'></div>
            <div id='colb'></div>
            <div id='colc'></div>   
        </div>
        <div class='rowblock'>
            <a href='graphic.html'>
                <div id='graphic'></div>
            </a>
            <a href='web.html'>
                <div id='web'></div>
            </a>
            <a href='market.html'>
                <div id='market'></div>
            </a>
        </div>

        <!-- more html content -->

    </body>
</html>

将鼠标悬停在1个div上即可更改另一个div中的内容

3 个答案: