Question

如何在任何链接图像上删除链接（a）的CSS？

链接（文本链接）有效，但它也适用于图像。那么，我需要补充一下。

我尝试添加此

a img {
    text-decoration: none;
    border: 0 none;
}

但它不起作用......

这是一段代码：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>


a {
	outline: none;
	text-decoration: none;
	position: relative;
	color: #9e9ba4;
	display: inline-block;
}
/* Kukuri */
a {
	text-transform: uppercase;
	font-weight: 300;
	overflow: hidden;
	
}

a:hover {
	color: #c5c2b8;
}

a::after {
	content: '';
	position: absolute;
	height: 16px;
	width: 100%;
	top: 50%;
	margin-top: -8px;
	right: 0;
	background: #ddd;
	-webkit-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0);
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

a:hover::after {
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
}

a::before {
	content: attr(data-letters);
	position: absolute;
	z-index: 2;
	overflow: hidden;
	color: #424242;
	white-space: nowrap;
	width: 0%;
	-webkit-transition: width 0.4s 0.3s;
	transition: width 0.4s 0.3s;
}

a:hover::before {
	width: 100%;
}


</style>
</head>
<body>

<a href="#" ><p>Some link</p></a>

<p>Some text <a href="#" ><img src="image.jpg" alt="Image" width="42" height="42"></a> some text.</p>


</body>
</html>

＆＃13;

Answer 1

尝试将class="<whateverNameYouWant>"添加到<a>，然后在您的CSS中使用.<whateverNameYouWant>代替a img。（用实际名称改变<whateverNameYouWant>）

Answer 2

您可以使用以下CSS

执行此操作

pointer-events: none;
cursor: default;

您可能需要在链接中添加一个类，例如

<a href="#" class="disable">example</a>

Answer 3

只需在cursor:default; CSS中添加a

<!DOCTYPE html>
<html>
<head>
<style>


a {
	outline: none;
	text-decoration: none;
	position: relative;
	color: #9e9ba4;
	display: inline-block;
    cursor:default; // ---- here ---- //
}
/* Kukuri */
a {
	text-transform: uppercase;
	font-weight: 300;
	overflow: hidden;
	
}

a:hover {
	color: #c5c2b8;
}

a::after {
	content: '';
	position: absolute;
	height: 16px;
	width: 100%;
	top: 50%;
	margin-top: -8px;
	right: 0;
	background: #ddd;
	-webkit-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0);
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

a:hover::after {
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
}

a::before {
	content: attr(data-letters);
	position: absolute;
	z-index: 2;
	overflow: hidden;
	color: #424242;
	white-space: nowrap;
	width: 0%;
	-webkit-transition: width 0.4s 0.3s;
	transition: width 0.4s 0.3s;
}

a:hover::before {
	width: 100%;
}


</style>
</head>
<body>

<a href="#" ><p>Some link</p></a>

<p>Some text <a href="#" ><img src="image.jpg" alt="Image" width="42" height="42"></a> some text.</p>


</body>
</html>

如何删除图像上的CSS链接效果

3 个答案: