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

div背景颜色，改变悬停时的背景颜色

发布于 2024-07-15 11:22:01 字数 390 浏览 11 评论 0原文

我正在尝试使 div 的背景颜色在鼠标悬停时发生变化。

div {背景：白色;}
div a:hover{背景:灰色; 宽度：100%；
显示：块；文本装饰：无；}

仅 div 内的链接获取背景颜色。

我该怎么做才能使整个div获得背景颜色？

谢谢

编辑：
我怎样才能使整个 div 充当链接 - 当您单击该 div 上的任意位置时，将您带到一个地址。

原文

分享到QQ

分享到微博

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

发布评论

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

冧九 2024-07-22 11:22:01

当鼠标悬停在 标签上时，“a:hover”字面意思是告诉浏览器更改该标签的属性。您的意思可能是“the div:hover”，它会在选择 div 时触发。

只是为了确保，如果您只想更改一个特定的 div，请给它一个 id ("

") 并使用 CSS "#something :hover {...}" 代替。如果要编辑一组 div，请将它们放入一个类 ("

") 并使用 CSS ".else {... }" 在这种情况下（注意类名称之前的句点！）

回复收藏 0 原文

不气馁 2024-07-22 11:22:01

使用 JavaScript

<div id="mydiv" style="width:200px;background:white" onmouseover="this.style.background='gray';" onmouseout="this.style.background='white';">
  Jack and Jill went up the hill To fetch a pail of water. Jack fell down and broke his crown, And Jill came tumbling after.
</div>

Using Javascript

<div id="mydiv" style="width:200px;background:white" onmouseover="this.style.background='gray';" onmouseout="this.style.background='white';">
  Jack and Jill went up the hill To fetch a pail of water. Jack fell down and broke his crown, And Jill came tumbling after.
</div>

回复收藏 0 原文

单身情人 2024-07-22 11:22:01

无需抛锚。然后更改 div 悬停时的样式
更改悬停时 div 的背景颜色。

.div_hover {
  background-color: #FFFFFF;
}

.div_hover:hover {
  background-color: #000000;
}

<div class="div_hover"> Change div background color on hover</div>

There is no need to put anchor. To change style of div on hover then
Change background color of div on hover.

.div_hover {
  background-color: #FFFFFF;
}

.div_hover:hover {
  background-color: #000000;
}

<div class="div_hover"> Change div background color on hover</div>

回复收藏 0 原文

无尽的现实 2024-07-22 11:22:01

要使整个 div 充当链接，请将锚标记设置为：

display: block

并将锚标记的高度设置为 100%。
然后为您的 div 标签设置固定高度。
然后像往常一样设置锚标记的样式。

例如：

<html>
<head>
    <title>DIV Link</title>

    <style type="text/css">
    .link-container {
        border: 1px solid;
        width: 50%;
        height: 20px;
    }

    .link-container a {
        display: block;
        background: #c8c8c8;
        height: 100%;
        text-align: center;
    }

    .link-container a:hover {
        background: #f8f8f8;
    }

    </style>

</head>
<body>

    <div class="link-container">
        <a href="http://www.stackoverflow.com">Stack Overflow</a>
    </div>

    <div class="link-container">
        <a href="http://www.stackoverflow.com">Stack Overflow</a>
    </div>

</body> </html>

祝你好运！

To make the whole div act as a link, set the anchor tag as:

display: block

And set your height of the anchor tag to 100%.
Then set a fixed height to your div tag.
Then style your anchor tag like usual.

For example:

<html>
<head>
    <title>DIV Link</title>

    <style type="text/css">
    .link-container {
        border: 1px solid;
        width: 50%;
        height: 20px;
    }

    .link-container a {
        display: block;
        background: #c8c8c8;
        height: 100%;
        text-align: center;
    }

    .link-container a:hover {
        background: #f8f8f8;
    }

    </style>

</head>
<body>

    <div class="link-container">
        <a href="http://www.stackoverflow.com">Stack Overflow</a>
    </div>

    <div class="link-container">
        <a href="http://www.stackoverflow.com">Stack Overflow</a>
    </div>

</body> </html>

Good luck!

回复收藏 0 原文

情徒 2024-07-22 11:22:01

html 代码：

    <!DOCTYPE html>
    <html>
    <head><title>this is your web page</title></head>
    <body>
    <div class = "nicecolor"></div>
    </body>
    </html>

css 代码：

    .nicecolor {
      color:red;
      width:200px;
      height:200px;
     }

    .nicecolor:hover {
      color:blue;
     }

这就是如何通过将鼠标悬停在 div 上将其从红色更改为蓝色。

html code:

    <!DOCTYPE html>
    <html>
    <head><title>this is your web page</title></head>
    <body>
    <div class = "nicecolor"></div>
    </body>
    </html>

css code:

    .nicecolor {
      color:red;
      width:200px;
      height:200px;
     }

    .nicecolor:hover {
      color:blue;
     }

and thats how youll change your div from red to blue by hovering over it.

回复收藏 0 原文

自由如风 2024-07-22 11:22:01

设置

display: block;

a并给出一些高度

Set

display: block;

on a and give some height

回复收藏 0 原文

怎言笑 2024-07-22 11:22:01

只需尝试 CSS 的“hover”属性即可。例如：

<html>
<head>
    <style>
        div
        {
            height:100px;
            width:100px;
            border:2px solid red;
        }
        div:hover
        {
            background-color:yellow;
        }
    </style>
</head>
<body>
            <a href="#">
                      <div id="ab">
                                <p> hello there </p>
                      </div>
            </a>
</body>

我希望这个能帮上忙

simply try "hover" property of CSS. eg:

<html>
<head>
    <style>
        div
        {
            height:100px;
            width:100px;
            border:2px solid red;
        }
        div:hover
        {
            background-color:yellow;
        }
    </style>
</head>
<body>
            <a href="#">
                      <div id="ab">
                                <p> hello there </p>
                      </div>
            </a>
</body>

i hope this will help

回复收藏 0 原文

梦回梦里 2024-07-22 11:22:01

您可以将锚点放在 div 周围。

<a class="big-link"><div>this is a div</div></a>

进而

a.big-link {
background-color: 888;
}
a.big-link:hover {
 background-color: f88;
}

You can just put the anchor around the div.

<a class="big-link"><div>this is a div</div></a>

and then

a.big-link {
background-color: 888;
}
a.big-link:hover {
 background-color: f88;
}

回复收藏 0 原文

坐在坟头思考人生 2024-07-22 11:22:01

您可以将 div 包含在锚标记中，如下所示：

a{
  text-decoration:none;
  color:#ffffff;
}
a div{
  width:100px;
  height:100px;
  background:#ff4500;
}
a div:hover{
  background:#0078d7;
}

<body>
<a href="http://example.com">
<div>
Hover me
</div>
</a>
</body>

you could just contain the div in anchor tag like this:

a{
  text-decoration:none;
  color:#ffffff;
}
a div{
  width:100px;
  height:100px;
  background:#ff4500;
}
a div:hover{
  background:#0078d7;
}

<body>
<a href="http://example.com">
<div>
Hover me
</div>
</a>
</body>

回复收藏 0 原文

↘人皮目录ツ 2024-07-22 11:22:01

只需在 css 文件中设置属性 !important ，这样鼠标悬停时背景颜色就不会改变。这对我有用。

例子：

.fbColor {
    background-color: #3b5998 !important;
    color: white;
}

Just make the property !important in your css file so that background color doesnot change on mouse over.This worked for me.

Example:

.fbColor {
    background-color: #3b5998 !important;
    color: white;
}

回复收藏 0 原文

~没有更多了~

关于作者

浸婚纱

暂无简介

0 文章

0 评论

23 人气

关注发私信

linfzu01

文章 0 评论 0

关注

§对你不离不弃

文章 0 评论 0

关注

可遇━不可求

文章 0 评论 0

关注

枕梦

文章 0 评论 0

关注

qq_3LFa8Q

文章 0 评论 0

关注

JP

文章 0 评论 0

友情链接

文江博客

div背景颜色，改变悬停时的背景颜色

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

发布评论

评论（10）

关于作者

相关话题

热门标签

推荐作者

linfzu01

§对你不离不弃

可遇━不可求

枕梦

qq_3LFa8Q

JP

友情链接

div背景颜色，改变悬停时的背景颜色

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

发布评论

评论（10）

关于作者

相关话题

热门标签

推荐作者

linfzu01

§对你不离不弃

可遇━不可求

枕梦

qq_3LFa8Q

JP

友情链接

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