如何去除图片上的 CSS 链接效果答案

【问题标题】：How to remove CSS link effect on image如何去除图片上的 CSS 链接效果
【发布时间】：2015-08-15 09:07:50
【问题描述】：

如何删除任何链接图像上链接 (a) 的 CSS？

链接（文本链接）有效果，但它也适用于图像。所以，我需要补充什么。

我尝试添加这个

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

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

这是一个代码：

<!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>

【问题讨论】：

请检查这个 SO 线程...stackoverflow.com/questions/814366/…

标签： css image hyperlink

【解决方案1】：

尝试将class="<whateverNameYouWant>" 添加到您的<a>，然后在您的CSS 中使用.<whateverNameYouWant> 而不是a img。（当然是把<whateverNameYouWant>改成真名）

【讨论】：

【解决方案2】：

您可以使用以下 CSS 来做到这一点

pointer-events: none;
cursor: default;

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

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

【讨论】：

是的，但是当我这样做时，图像的链接不再可用。

【解决方案3】：

只需要在acss中添加cursor:default;

<!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>

【讨论】：