Question

我有以下想法：容器包含一些信息，我想用.hover事件更改另一张图片的div图标。这是我的div容器。

<div class="column1">
         <span class="columnLogo"></span>
         <span class="fTitle"><h5>Front-end Development</h5>
            <img src="images/mini1.png"></span>
             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
    </div>

我需要在悬停列时更改第一个<span>元素的图像。

Answer 1

.column1:hover{
   background: #f0f0f0 url('my-image.jpg');
}

Answer 2

将CSS与背景图像一起使用。使用HTML，例如：

<div class="column1">
     <span class="columnLogo"></span>
     <span class="fTitle"><h5>Front-end Development</h5><img src="images/mini1.png"></span>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
</div>

和CSS如：

.column1 .columnLogo {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(images/logo.png) no-repeat center;
}
.column1:hover .columnLogo {
    background-image: url(images/logo-hover.png);
}

Answer 3

怎么样

$(".column1 img")

...

Answer 4

您可以使用background mini1.png并使用该跨度的css控制转换来改变跨度中的img。

    <div class="column1">
     <span class="columnLogo"></span>
     <span class="fTitle"><h5>Front-end Development</h5>
        <span class="myimageclass">&nbsp;</span>

      </span>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
</div>

的CSS：

   .myimageclass{background:url("images/mini1.png");}
   .myimageclass:hover {background:url("images/mini2.png");}

使用jquery选择器更改背景图片

4 个答案: