Question

I have 3 links at the top of my webpage and a link embedded into an image.Those 3 have a different background color from the nav but, unfortunately, it also adds this to the image with the link. How do I take it off the image?

html{
	font-family: abel;
	background-color: #a4bdd1;
	margin: 0;
	padding: 0;
}
body{
    overflow-x:hidden;
    margin: 0;
    padding: 0;
}
nav {
    text-align: center;
    background-color: #e4e6e5;
/*    position: fixed;
    top: 0;
  	left: 0;
  	z-index: 9999;*/
 	width: 100%;
  	border-bottom: solid #05182e 2px;
  	margin-top: -1px
}
nav li {
    display: inline-block;
    font-size: 35px;
    padding: 15px;
    font-weight: bold;
    vertical-align: middle;
}

nav a{
	border-radius: 10%;
	padding: 8px;
	background-color: #cccccc;
	color: #1f3b5a;
	text-decoration: none;
	font-size: 30px;
	transition: all 0.5s ease-in-out;
}
nav a:hover{
	font-size: 40px;
	transition: all 0.5s ease-in-out;
}
nav img{
	width: 30%;
	border: none;
	transition: all 0.5s ease-in-out;
}
nav img:hover{
	width: 40%;
	transition: all 0.5s ease-in-out;
}
ul {
   margin: 0;
}

<!DOCTYPE html>
<html>
<head>
  	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="style.css">
	<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Bitter:700' rel='stylesheet' type='text/css'>
	<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
	<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
	<title>Brampton Thunder</title>
</head>

<body>

	<nav> 
	    <ul> 
	    	<li><img src="images/logo.png" alt="Canadian Women's Hockey League Logo"></li>
	        <li> <a href="index.html" target="_blank">Home</a></li>
	        <li> <a href="roster.html" target="_blank">Roster</a></li>
	        <li> <a href="schedule.html" target="_blank">Schedule</a></li>
	        <li><a href="http://cwhl.ca" target="_blank"><img src="images/cwhllogo.png"></a></li>

	    </ul>
	</nav>

Answer 1

你可以这样做：

nav ul li:last-child a {
  background-color:#e4e6e5; 
}

检查下面的代码段

＆＃13;

html {
  font-family: abel;
  background-color: #a4bdd1;
  margin: 0;
  padding: 0;
}
body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}
nav {
  text-align: center;
  background-color: #e4e6e5;
  /*    position: fixed;
    top: 0;
  	left: 0;
  	z-index: 9999;*/
  width: 100%;
  border-bottom: solid #05182e 2px;
  margin-top: -1px
}
nav li {
  display: inline-block;
  font-size: 35px;
  padding: 15px;
  font-weight: bold;
  vertical-align: middle;
}
nav a {
  border-radius: 10%;
  padding: 8px;
  background-color: #cccccc;
  color: #1f3b5a;
  text-decoration: none;
  font-size: 30px;
  transition: all 0.5s ease-in-out;
}
nav ul li:last-child a {
  background-color: #e4e6e5;
}
nav a:hover {
  font-size: 40px;
  transition: all 0.5s ease-in-out;
}
nav img {
  width: 30%;
  border: none;
  transition: all 0.5s ease-in-out;
}
nav img:hover {
  width: 40%;
  transition: all 0.5s ease-in-out;
}
ul {
  margin: 0;
}

＆＃13;

<nav>
  <ul>
    <li>
      <img src="images/logo.png" alt="Canadian Women's Hockey League Logo">
    </li>
    <li> <a href="index.html" target="_blank">Home</a>
    </li>
    <li> <a href="roster.html" target="_blank">Roster</a>
    </li>
    <li> <a href="schedule.html" target="_blank">Schedule</a>
    </li>
    <li>
      <a href="http://cwhl.ca" target="_blank">
        <img src="images/cwhllogo.png">
      </a>
    </li>

  </ul>
</nav>

＆＃13;

Answer 2

<强> HTML

<li><a href="http://cwhl.ca" target="_blank" class="link"><img src="images/cwhllogo.png"></a></li>

<强> CSS

.link { //whatever you want the link to look like }

.link:hover { //whatever you want the link to look like while being hovered on }

Answer 3

您可以做的是为所有需要背景的<a>标签提供课程。这样你只需要这样写：

nav a.bg {
    /* enter style here */
}

和HTML中一样：

<nav>
    <li><a href="#" class="bg">Link 1</a></li>
    <li><a href="#" class="bg">Link 2</a></li>
    <li><a href="#"><img src="#"></a></li>
</nav>

<强>替代地

指定所有nav a的背景，就像您在示例中所做的那样。然后为包含图像的所有nav a添加一个单独的类，删除背景。

你可以这样做：

CSS：

nav a {
    background: #333;
}

nav a.img {
    background: transparent;
}

HTML：

<nav>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#" class="img"><img src="#"></a></li>
</nav>

Answer 4

您可以为<img>提供id和<a id="image"><img /></a>：

a#image {
  background-color: transparent;
}

然后，您可以将其背景颜色设置为空：

a {
  background-color: blue;
}
a#image {
  background-color: transparent;
}

摘录：

<a href="#">abc</a>
<a href="#" id="image"><img src="//google.com/favicon.ico"></a>

$sqlQuery = "INSERT INTO users_details.details ( firstname, lastname, email, password ) VALUES ( \' ".$_POST['firstName']." \', \'".$_POST['lastName']."\', \'".$_POST['email']."\'  \'".$_POST['password']."\' )";

Answer 5

使用一些CSS和javascript来禁用它，而不是删除它。首先，您需要删除锚点或图像翻转时发生的转换（并删除图像后面的灰色按钮）：

nav li:last-of-type a:hover, 
nav li:last-of-type a,
nav li:last-of-type a img{
    font-size:0;
    background:none;
    transition:none;
    width:30%;
    cursor:default;
}

然后使用一点jQuery来阻止链接工作：

$('nav li:last-of-type a').click(function(e){
    e.preventDefault();
});

完整代码和示例：

$('nav li:last-of-type a').click(function(e) {
    e.preventDefault();
});

html {
    font-family: abel;
    background-color: #a4bdd1;
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

nav {
    text-align: center;
    background-color: #e4e6e5;
    /*    position: fixed;
    top: 0;
  	left: 0;
  	z-index: 9999;*/
    width: 100%;
    border-bottom: solid #05182e 2px;
    margin-top: -1px
}

nav li {
    display: inline-block;
    font-size: 35px;
    padding: 15px;
    font-weight: bold;
    vertical-align: middle;
}

nav a {
    border-radius: 10%;
    padding: 8px;
    background-color: #cccccc;
    color: #1f3b5a;
    text-decoration: none;
    font-size: 30px;
    transition: all 0.5s ease-in-out;
}

nav a:hover {
    font-size: 40px;
    transition: all 0.5s ease-in-out;
}

nav img {
    width: 30%;
    border: none;
    transition: all 0.5s ease-in-out;
}

nav img:hover {
    width: 40%;
    transition: all 0.5s ease-in-out;
}

ul {
    margin: 0;
}

nav li:last-of-type a:hover,
nav li:last-of-type a,
nav li:last-of-type a img {
    font-size:0;
    background:none;
    transition: none;
    width: 30%;
    cursor: default;
}

<nav>
    <ul>
        <li><img src="http://lorempixel.com/400/400" alt="Canadian Women's Hockey League Logo"></li>
        <li> <a href="index.html" target="_blank">Home</a></li>
        <li> <a href="roster.html" target="_blank">Roster</a></li>
        <li> <a href="schedule.html" target="_blank">Schedule</a></li>
        <li>
            <a href="http://cwhl.ca" target="_blank"><img src="http://lorempixel.com/400/400"></a>
        </li>

    </ul>
</nav>

只更改一个<a> tag

5 个答案: