在html中访问链接后如何删除下划线和紫色文本颜色

Question

我有一个带图片和一些文字的盒子。我希望整个框成为到新页面的链接。当我将鼠标悬停时，我希望减少不透明度并更改背景颜色。但是，当我访问链接后返回页面时，文本变为紫色并带有下划线。

我尝试使用a：visited，但不起作用。

我感谢我能获得的所有帮助

.one {
    margin: 10px;
    background-color: rgb(231, 231, 231);
    width: 29%;
    padding: 10px;
    display: inline-flex;
    text-decoration: none;
    color: black;
    }
.one img {
    margin: 0 15px 0 0;
    object-position: 0% -90px; 
    width: 230px; /* width of container */
    height: 230px; /* height of container */
    object-fit: cover;
    border-radius: 50%;
    }
.one:visited{
    text-decoration: none;
    color: black;    
    }
.one:hover {
    opacity: 90%;
    background-color: rgb(238, 238, 238);
    }

    <a href="surf.html" class="one">
        <img src="surf.jpg" alt="">
        <div>
            <h1>Surfing</h1>
            <p>Come and surf in the worlds most beautiful places</p>
        </div>    
    </a>

！

Answer 1

您尝试过这个吗：

a {color:#FF0000;}         /* Unvisited link  */
a:visited {color:#00FF00;} /* Visited link    */
a:hover {color:#FF00FF;}   /* Mouse over link */
a:active {color:#0000FF;}  /* Selected link   */