在类里为什么 text-decoration-color: brown；没有改变内容颜色（包括“悬停时变色”教程，以及对table表格tr（行）点击后弹出对话框删除的代码内容以及解释）

星途码客

于 2024-07-17 22:00:00 发布

阅读量308

点赞数 10

分类专栏： JavaScript 前端#CSS 前端#HTML 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/2303_80856850/article/details/140506342

版权

JavaScript 同时被 3 个专栏收录

17 篇文章 1 订阅

订阅专栏

前端#CSS

8 篇文章 0 订阅

订阅专栏

前端#HTML

6 篇文章 0 订阅

订阅专栏

直接看下面的代码style里的.cursor类

本代码还包含对table表格tr（行）点击后弹出对话框删除的代码内容以及解释

问：为什么 text-decoration-color: brown; 没有改变内容颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table
        {
            width: 500px;
            border-collapse: collapse;
        }
        td{
            border:solid 1px rgb(102, 236, 102);
        }
        .cursor
        {
            cursor: pointer;
            text-decoration-color: brown;
        }
    </style>

</head>
<body>
    <table id="herotable">
        <tr>
            <td>英雄名称</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>张三</td>
            <td><a onclick="shan(this)" class="cursor">删除</a></td>
        </tr>
        <tr>
            <td>李四</td>
            <td><span onclick="shan(this)" class="cursor">删除</span></td>
        </tr>
        <tr>
            <td>小明</td>
            <td><span onclick="shan(this)" class="cursor">删除</span></td>
        </tr>

    </table>

    <script>
        function shan(element)
        {
            var flag=confirm("确定要删除该英雄？");
            if(flag)
            {
                var table=document.getElementById("herotable");
                var td=element.parentNode;
                var tr=td.parentNode;
                var index=tr.rowIndex;
                table.deleteRow(index);//table删除行时不能用removeChild，而要用deleteRow
            }
        }

    </script>

</body>
</html>

1.这个需要配合text-decoration属性一起使用，且这个只能改变修饰的颜色（即本例的下划线）

在HTML和CSS代码中，尝试使用text-decoration-color: brown;来改变.cursor类的文本装饰颜色（即下划线或删除线的颜色），但这里有几个关键点需要注意：

1. text-decoration-color 的使用：

这个属性确实可以改变文本装饰的颜色，但它通常与text-decoration属性一起使用，因为text-decoration-color只影响已经存在的文本装饰。如果元素上没有文本装饰（如下划线或删除线），text-decoration-color将不会有任何效果。

2. 默认文本装饰：

<a>标签默认具有下划线作为文本装饰，但标签没有。因此，在你的例子中，<a>标签的text-decoration-color会生效（尽管你可能需要先应用text-decoration: underline;来确保有下划线），但标签由于默认没有文本装饰，所以text-decoration-color不会有任何效果。

3.解决方案：

如果你想要元素也有文本装饰（并改变其颜色），你需要在CSS中明确指定text-decoration属性。例如：

.cursor {  
    cursor: pointer;  
    text-decoration: underline;  /* 添加下划线 */  
    text-decoration-color: brown; /* 改变下划线颜色 */  
}

如果你不希望使用下划线，但想要其他类型的视觉反馈（如颜色变化或背景色变化），你可以考虑使用其他CSS属性，如color（改变文字颜色）、background-color（改变背景颜色）或border（添加边框）等。

.cursor {  
    cursor: pointer;  
    text-decoration: underline;  
    text-decoration-color: brown;  
}  

/* 或者，如果你想要更明显的变化 */  
.cursor:hover {  
    color: red; /* 鼠标悬停时改变文字颜色 */  
}

这样，无论是<a>标签还是标签，在鼠标悬停时都会有明显的变化，并且标签也会显示棕色的下划线。

2.改变文本内容的颜色用color，悬停在类后加“:hover”

如果你想要修饰内的文字本身，而不是它的文本装饰（如下划线），那么你应该使用color属性而不是text-decoration-color。color属性会改变元素的文字颜色。

在你的例子中，如果你想要内的文字变成棕色，你可以这样修改CSS：

.cursor {  
    cursor: pointer;  
    color: brown; /* 修改这里来改变文字颜色 */  
}

这样，无论是<a>标签还是标签（只要它们有.cursor类），它们内部的文字都会变成棕色。但是，请注意，<a>标签默认有下划线，并且它的颜色可能会受到浏览器或用户样式表的影响。如果你想要<a>标签也完全像那样表现（即没有下划线且文字为棕色），你可能还需要添加额外的CSS来覆盖<a>标签的默认样式：

.cursor {  
    cursor: pointer;  
    color: brown; /* 更改文字颜色为棕色 */  
    text-decoration: none; /* 移除<a>标签的下划线 */  
}  
  
a.cursor:hover {  
    /* 如果需要，可以在这里添加鼠标悬停时的样式 */  
    text-decoration: underline; /* 或者你也可以选择不添加下划线 */  
}

现在，无论是<a>还是，只要它们有.cursor类，它们的文字都会是棕色的，并且<a>标签的下划线会被移除（除非你特别在:hover状态下添加了它）。

改后成果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table
        {
            width: 500px;
            border-collapse: collapse;
        }
        td{
            border:solid 1px rgb(102, 236, 102);
        }
        .cursor
        {
            cursor: pointer;
            color: aqua;
            text-decoration: underline;  /* 添加下划线 */
            text-decoration-color: rgb(238, 8, 8);
        }
        .cursor:hover
        {
            color: blueviolet;
            text-decoration-color: rgb(71, 4, 229);
        }
    </style>

</head>
<body>
    <table id="herotable">
        <tr>
            <td>英雄名称</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>张三</td>
            <td><a onclick="shan(this)" class="cursor">删除</a></td>
        </tr>
        <tr>
            <td>李四</td>
            <td><span onclick="shan(this)" class="cursor">删除</span></td>
        </tr>
        <tr>
            <td>小明</td>
            <td><span onclick="shan(this)" class="cursor">删除</span></td>
        </tr>

    </table>

    <script>
        function shan(element)
        {
            var flag=confirm("确定要删除该英雄？");
            if(flag)
            {
                var table=document.getElementById("herotable");
                var td=element.parentNode;
                var tr=td.parentNode;
                var index=tr.rowIndex;
                table.deleteRow(index);//table删除行时不能用removeChild，而要用deleteRow
            }
        }

    </script>

</body>
</html>

我会以“时”为尺，丈量自己的进步，用“嘉”言“嘉”行，努力珍惜时间，向着她一步步迈进！(眼中闪烁着坚定的光芒，透露出对未来的决心和期待)

respect！

星途码客

关注

10
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
在类里为什么 text-decoration-color: brown；没有改变内容颜色（包括“悬停时变色”教程，以及对table表格tr（行）点击后弹出对话框删除的代码内容以及解释）

直接看下面的代码style里的.cursor类。本代码还包含对table表格的tr（行）点击后弹出对话框删除的代码内容以及解释。
复制链接

扫一扫