网站首页
精品模板
会员模板
建站资源
站长素材
建站教程
编程笔记
编程问答
编程问答
前端开发问题 Java开发问题 C/C++开发问题 Python开发问题 C#/.NET开发问题 php开发问题 移动开发问题 数据库问题
沃梦达建站-编程问答-前端开发问题-正文

下划线<a>悬停时标记

2023-07-31前端开发问题
40
本文介绍了下划线<a>悬停时标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

我希望我的 <a> 标签在悬停时带有下划线.我有以下代码，但它不起作用.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 过渡//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="服务器"><标题></标题><style type="text/css">a.hover:hover {文本装饰:下划线；}</风格></头><身体><form id="form1" runat="server">
<a class="hover" style=" text-decoration:none; color:red" href="">站点地图</a></div></表格></身体></html>

这个:

a:hover {text-decoration: underline;}<a style=" text-decoration:none; color:red" href="">站点地图</a>

也不行.

我该怎么办?有什么问题?

解决方案

style属性更多比任何选择器都特定，所以它总是在级联中最后应用(可怕的 !important 规则无法承受).将 CSS 移至样式表.

a.hover {红色;文字装饰:无；}a.hover:悬停{文字装饰:下划线；}

(我还建议为该类命名更具语义化的名称).

I want my <a> tag gets underlined when hovered. I have the following code, but it doesn't work.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">

     a.hover:hover {text-decoration: underline;}
     </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a class="hover" style=" text-decoration:none; color:red" href="">Site Map</a>

    </div>
    </form>
</body>
</html>

This:

a:hover {text-decoration: underline;}
<a  style=" text-decoration:none; color:red" href="">Site Map</a>

doesn't work either.

What should I do? What is the problem?

解决方案

The style attribute is more specific than any selector, so it will always be applied last in the cascade (horrible !important rules not withstanding). Move the CSS to the stylesheet.

a.hover {
    color: red;
    text-decoration: none;
}

a.hover:hover {
    text-decoration: underline;
}

(I also suggest a more semantic name for the class).

这篇关于下划线&lt;a&gt;悬停时标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

The End

相关推荐

layui 实现实时刷新一个外部的div
主页面上显示了一个合计，在删除和增加的时候需要更改这个总套数的值： //html代码div class="layui-inline layui-show-xs-block" style="margin-left: 10px" id="sumDiv"spanSOP合计:/spanspan${totalNum}/spanspan套/span/div 于是在我们删除这个条数据后，...
2024-11-14 前端开发问题
156
layui 单选框、复选框、下拉菜单不显示问题如何解决？
1. 如果是ajax嵌套了 页面， 请确保 只有最外层的页面引入了layui.css 和 layui.js ,内层页面 切记不要再次引入 2. 具体代码如下 layui.use(['form', 'upload'], function(){ var form = layui.form; form.render(); // 加入这一句});...
2024-11-09 前端开发问题
313
layui要如何改变时间日历布局大小？
问题描述 我想改变layui时间日历布局大小，这个要怎么操作呢？ 解决办法 可以用css样式对时间日历进行重新布局，具体代码如下： !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...
2024-10-24 前端开发问题
271
jQuery怎么动态向页面添加代码？
append() 方法在被选元素的结尾（仍然在内部）插入指定内容。 语法： $(selector).append( content ) var creatPrintList = function(data){ var innerHtml = ""; for(var i =0;i data.length;i++){ innerHtml +="li class='contentLi'"; innerHtml +="a href...
2024-10-18 前端开发问题
125
“数组中的每个孩子都应该有一个唯一的 key prop"仅在第一次呈现页面时
quot;Each child in an array should have a unique key propquot; only on first time render of page(“数组中的每个孩子都应该有一个唯一的 key prop仅在第一次呈现页面时)...
2024-04-20 前端开发问题
5
CoffeeScript 总是以匿名函数返回
CoffeeScript always returns in anonymous function(CoffeeScript 总是以匿名函数返回)...
2024-04-20 前端开发问题
13

热门文章

1错误 [ERR_REQUIRE_ESM]:不支持 ES 模块的 require() 2vue中yarn install报错：info There appears to be trouble with you 3为什么 Chrome(在 Electron 内部)会突然重定向到 chrome-error://chromewebdat 4“aria-hidden 元素不包含可聚焦元素"显示模态时的问题 5使用选择器在 CSS 中选择元素的前一个兄弟 6js报错：Uncaught SyntaxError: Unexpected string 7layui怎么刷新当前页面？ 8将模式设置为“no-cors"时使用 fetch 访问 API 时出错

热门精品源码

最新VIP资源

1多功能实用站长工具箱html功能模板 2多风格简历在线生成程序网页模板 3论文相似度查询系统源码 4响应式旅游景点宣传推广页面模板 5在线起名宣传推广网站源码 6酷黑微信小程序网站开发宣传页模板 7房产销售交易中介网站模板 8小学作业自动生成程序