Question

我使用CSS按钮样式创建了一个导航栏，并希望每个按钮都是一个链接。但是当用户访问链接时，链接样式会发生变化（添加下划线并使链接文本变为蓝色），我无法弄清楚如何设置按钮内访问过的链接的样式。

我的代码：

.navbutton {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 95px 80px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.navbutton1 {
  background-color: 4CAF50;
  color: white;
  text-decoration: none;
  border: 1px solid #FFFFFF;
  height: 50px;
  width: 130px;
  font-size: 14px;
  font-weight: 400;
}

.navbutton1:hover {
  background-color: #0000FF;
  color: white;
  height: 50px;
  width: 130px;
  font-size: 14px;
  font-weight: 400;
}

.navbutton1:visited {
  background-color: #0000FF;
  text-decoration: none;
  color: white;
  height: 50px;
  width: 130px;
  font-size: 14px;
  font-weight: 400;
}

<button class="navbutton navbutton1"><a href="http://www.test.test">Home</a></button>

有没有办法控制此按钮的访问链接样式？

Answer 1

＆＃13;

<!--NAV BUTTONS-->
.navbutton {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 95px 80px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
font-weight:bold;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}

.navbutton1 {
background-color: 4CAF50; 
color: white; 
text-decoration: none;
border: 1px solid #FFFFFF;
height: 50px;
width: 130px;
font-size: 14px;
font-weight: 400;
}

.navbutton1:hover {
background-color: #0000FF;
color: white;
height: 50px;
width: 130px;
font-size: 14px;
font-weight: 400;
}


.navbutton1:visited {
background-color: #0000FF;
text-decoration: none;
color: white;
height: 50px;
width: 130px;
font-size: 14px;
font-weight: 400;
}

.navbutton1 a{
text-decoration: none;
color: #fff;
}

.navbutton1:hover a{
color: red;
}

.navbutton1 a:visited{
color: black;
}

＆＃13;

<button class="navbutton navbutton1"><a href="#">Home</a>
</button>

＆＃13;

你去吧

.navbutton1 a:visited{
 //Your CSS styles
 }

Answer 2

您要添加样式anchor还要将样式添加到.navbutton1 a{ color:white; text-decoration:none; }标记。

使用此css

    <!--NAV BUTTONS-->
    .navbutton {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 95px 80px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
	font-weight:bold;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    }

    .navbutton1 {
    background-color: 4CAF50; 
    color: white; 
    text-decoration: none;
	border: 1px solid #FFFFFF;
	height: 50px;
	width: 130px;
	font-size: 14px;
	font-weight: 400;
    }

    .navbutton1:hover {
    background-color: #0000FF;
    color: white;
	height: 50px;
	width: 130px;
	font-size: 14px;
	font-weight: 400;
    }
    .navbutton1 a{
     color:white;
     text-decoration:none;
     }

    .navbutton1:visited {
    background-color: #0000FF;
    text-decoration: none;
	color: white;
	height: 50px;
	width: 130px;
	font-size: 14px;
	font-weight: 400;
    }

<button class="navbutton navbutton1"><a href="http://www.test.test">Home</a></button>

<system.webServer>
    <rewrite>
        <globalRules>
            <clear />
            <rule name="non-www to www" enabled="true" stopProcessing="false">
                <match url=".*" />
                <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
                    <add input="{CACHE_URL}" pattern="^(.+)://(?!www)(.*)" />
                </conditions>
                <action type="Redirect" url="{C:1}://www.{C:2}" />
            </rule>     

            <rule name="http to https" stopProcessing="true">
                <match url="(.*)" /> <!-- Require SSL must be OFF in the site settings -->
                <conditions>
                <add input="{HTTPS}" pattern="off" ignoreCase="true" />
                </conditions>
                <action type="Redirect" redirectType="Found" url="https://{HTTP_HOST}{REQUEST_URI}" />
            </rule>
        </globalRules>
    </rewrite>
</system.webServer>

Answer 3

<a>代码有下划线和默认颜色......所以你需要使用继承父pf颜色的color:inherit以及text-decoration:none来删除颜色下划线。

也不需要在:hover上写相同的CSS ...只写你要改变哪种风格......

也不要在css中使用html块评论标记 ...使用/*...*/

.navbutton1 a {
  color: inherit;
  text-decoration: none;
}

.navbutton1 {
  background-color: #4CAF50;
  color: white;
  text-decoration: none;
  border: 1px solid #FFFFFF;
  height: 50px;
  width: 130px;
  font-size: 14px;
  font-weight: 400;
}

.navbutton1:hover {
  background-color: #0000FF;
}

.navbutton1 a,
.navbutton1 a:visited,
.navbutton1 a:hover {
  color: inherit;
  text-decoration: none;
}

<button class="navbutton navbutton1">
  <a href="#">Home</a>
</button>

在样式按钮内控制链接样式

3 个答案: