div背景颜色,改变onhover

作者：夏晶阳--艺术 | 2023-08-28 22:00

如何解决《div背景颜色,改变onhover》经验，为你挑选了6个好方法。

我试图在鼠标悬停时使div的背景颜色发生变化.

div {background:white;}
div a:hover {background:grey; 宽度:100%;
显示:块; 文字修饰:无;}

只有 div中的链接才能获得背景颜色.

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

谢谢

编辑:
如何让整个div作为一个链接 - 当你点击该div上的任何地方,带你到一个地址.

1> Henrik Paul..：

当鼠标悬停在标签上时," a:hover"字面上告诉浏览器更改-tag 的属性.您可能想要的是" the div:hover",而选择div时会触发.

只是为了确保,如果你只想改变一个特定的div,给它一个id("

")并使用CSS" #something:hover {...}".如果你想编辑一组div,在这种情况下将它们变成一个类("

")并使用CSS" .else {...}"(注意类名称之前的句号!)

2> Real Red...：

使用Javascript

   
    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.

3> 小智..：

没有必要放锚.要在悬停时更改div的样式,请在悬停时更改div的背景颜色.

 Change div background color on hover

在.css页面

.div_hover { background-color: #FFFFFF; }

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

4> 小智..：

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

display: block

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

例如:



    DIV Link

    




    
        Stack Overflow
    

    
        Stack Overflow

祝好运!

5> 小智..：

HTML代码:

    
    
    this is your web page

css代码:

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

    .nicecolor:hover {
      color:blue;
     }

这就是你如何将你的div从红色变为蓝色,将其悬停在它上面.

6> Jamol..：

组

display: block;

在一个高度上

推荐阅读

程序员
Robolectric 3.0无法测试启动HandlerThread的函数

如何解决《Robolectric3.0无法测试启动HandlerThread的函数》经验，为你挑选了0个好方法。 ... [详细]
程序员
了解mesos上的spark作业的资源分配

如何解决《了解mesos上的spark作业的资源分配》经验，为你挑选了0个好方法。 ... [详细]
程序员
我可以在vuejs循环中使用插槽吗？

如何解决《我可以在vuejs循环中使用插槽吗？》经验，为你挑选了1个好方法。 ... [详细]
程序员
独特的键值对集合

如何解决《独特的键值对集合》经验，为你挑选了0个好方法。 ... [详细]
程序员
操纵ActiveRecord对象以构建JSON

如何解决《操纵ActiveRecord对象以构建JSON》经验，为你挑选了0个好方法。 ... [详细]
程序员
Python pandas合并了keyerror

如何解决《Pythonpandas合并了keyerror》经验，为你挑选了1个好方法。 ... [详细]
程序员
x86_64:强制gcc在堆栈上传递参数

如何解决《x86_64:强制gcc在堆栈上传递参数》经验，为你挑选了0个好方法。 ... [详细]
程序员
Python - 降低niceness值

如何解决《Python-降低niceness值》经验，为你挑选了1个好方法。 ... [详细]
程序员
Internet Explorer中带有阴影的SVG文本

如何解决《InternetExplorer中带有阴影的SVG文本》经验，为你挑选了1个好方法。 ... [详细]
程序员
有没有办法在js生成的excel文件上设置安全内容？

如何解决《有没有办法在js生成的excel文件上设置安全内容？》经验，为你挑选了0个好方法。 ... [详细]
程序员
在级联持续父级之后,子级ID不存在

如何解决《在级联持续父级之后,子级ID不存在》经验，为你挑选了0个好方法。 ... [详细]
程序员
如何选择AWT-EventQueue线程,当有多个线程时

如何解决《如何选择AWT-EventQueue线程,当有多个线程时》经验，为你挑选了0个好方法。 ... [详细]
程序员
使用Angular2处理404

如何解决《使用Angular2处理404》经验，为你挑选了1个好方法。 ... [详细]
程序员
Laravel验证单选按钮输入

如何解决《Laravel验证单选按钮输入》经验，为你挑选了1个好方法。 ... [详细]
程序员
process.env vs app.get('env')获取express.js环境

如何解决《process.envvsapp.get('env')获取express.js环境》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何在R中粘贴项目列表

如何解决《如何在R中粘贴项目列表》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何使用泛型参数获取Scala运行时类？

如何解决《如何使用泛型参数获取Scala运行时类？》经验，为你挑选了1个好方法。 ... [详细]
程序员
在TMemo中锁定文本的开头

如何解决《在TMemo中锁定文本的开头》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何以这种格式验证字符串:p [1或更多数字]？

如何解决《如何以这种格式验证字符串:p[1或更多数字]？》经验，为你挑选了1个好方法。 ... [详细]
程序员
如果a的值是5,那么a ++ + a的值是多少？

如何解决《如果a的值是5,那么a+++a的值是多少？》经验，为你挑选了1个好方法。 ... [详细]

夏晶阳--艺术

这个屌丝很懒，什么也没留下！

关注作者

Tags | 热门标签

RankList | 热门文章

DevBox开发工具箱 | 专业的在线开发工具网站