当前位置：文江博客话题详情

不同的链接CSS悬停改变图片

发布于 2024-12-07 10:47:36 字数 226 浏览 0 评论 0原文

我想要 CSS 悬停影响影响同一图像的多个链接。如果您查看此示例站点，我会提供修复、销售、升级和数据恢复链接。当您将鼠标悬停在其中任何一个上时，我希望它们左侧的图像发生变化。您可以将鼠标悬停在当前图像上以了解我的意思。

网站：http://ctuchicago.squarespace.com/

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

下雨或天晴 2024-12-14 10:47:36

我将创建一个包含图像和所有链接的框。然后，当该框悬停在图像上时，图像将会发生变化。这并不能让你得到你想要的东西 - 只是将鼠标悬停在链接上会改变图像，但我认为它足够接近并且更容易。

http://jsfiddle.net/mrtsherman/D5ZRs/

div:hover img { background: url('blah'); }

<div> 
  <img src="" />
  <a href="">Repair</a>
  <a href="">Sales</a>
</div>

I would create a box that contains the image and all of the links. Then when the box is hovered over the image will change. This doesn't get you exactly what you want - which is only hovering over the link changes the image, but I think it is close enough and far easier.

http://jsfiddle.net/mrtsherman/D5ZRs/

div:hover img { background: url('blah'); }

<div> 
  <img src="" />
  <a href="">Repair</a>
  <a href="">Sales</a>
</div>

回复收藏 0 原文

隐诗 2024-12-14 10:47:36

将图像放入 a 标记内。然后使用 position:relative 来定位图像...

例如

a img{
   position: relative;
   left: -50px;
}

Put the image inside the a tag. Then use position: relative to position the image...

for example

a img{
   position: relative;
   left: -50px;
}

回复收藏 0 原文

滴情不沾 2024-12-14 10:47:36

这似乎有效...部分 XD

<div class="frontdiv fblankd">
    <a href="/audio-video" id="hav" style="width: auto;">
        <div style="
            height: 80px;
            margin-left: 81px;
            background: white;
            color: black;
        ">
            <h3>AUDIO / VIDEO</h3>
            <p><a href="#music">Music Server</a>, <a href="#theatre">Home Theatre</a>, <a href="#zone">Zone Systems</a>, <a href="#remote">Universal Remote Control</a></p>
        </div>
    </a>
</div>

基本思想是将您的内容放在 a 标签中（就像人们所说的那样）。

我对样式所做的是将锚点设置为 width:auto 并将内容包装在 div 中。然后我给这个div的高度为80px，左边距为81px，背景为白色，字体颜色为黑色。

This seems to work... partially XD

<div class="frontdiv fblankd">
    <a href="/audio-video" id="hav" style="width: auto;">
        <div style="
            height: 80px;
            margin-left: 81px;
            background: white;
            color: black;
        ">
            <h3>AUDIO / VIDEO</h3>
            <p><a href="#music">Music Server</a>, <a href="#theatre">Home Theatre</a>, <a href="#zone">Zone Systems</a>, <a href="#remote">Universal Remote Control</a></p>
        </div>
    </a>
</div>

The basic idea is to have your content in the a tag (like ever body has been saying).

What I've done with the styling is set the anchor to width:auto and wrapped the content in a div. this div I then gave a height of 80px, left margin of 81px, background of white and font color of black.

回复收藏 0 原文