4
Я строю сайт и застрял в этой странной проблеме. Когда я меняю color и text-decoration с помощью селектора css и a:link, a:visited код работает нормально, но когда я добавляю a:hover, ничего не происходит.ссылка не изменяется цвет при наведении указателя мыши на: hover
В принципе, я хочу только изменить цвет ссылки на mouseover, чтобы люди могли легко видеть, что это ссылка, на которую они могут щелкнуть.
Я использую шрифт google и шаблон, называемый normalize.css (оба связаны с фрагментом, использующим CDN). Я также использую собственный шрифт значков под названием ionicons и другую таблицу стилей для создания заголовка/нижнего колонтитула, но я не думаю, что они релевантны, так как я воссоздал проблему в нижеприведенном фрагменте без ссылки на них.
Уверен, что мне не хватает чего-то очевидного, но я не могу это понять. Ниже приведен фрагмент.
/************************************************
LAYOUT
************************************************/
/************************************************
SEARCHBOX
************************************************/
#articles-sidebar {
\t margin: 0.5em 0;
\t padding: 1em;
}
#articles-sidebar h2, #articles-sidebar p {
\t margin: 0;
\t padding: 0;
}
#articles-sidebar input {
\t box-sizing: border-box;
\t padding: 0.5em;
\t margin: 0.5em 0;
}
#articles-sidebar input[type="submit"] {
\t border: none;
\t color: #fff;
\t background-color: #26A65B;
}
/************************************************
ARTICLES
************************************************/
.article-box {
\t padding: 0.5em;
\t margin-bottom: 0.5em;
}
.free {
\t background-color: #e3f9ec;
}
.members {
\t background-color: #e1b8dd;
}
.article-categories {
\t list-style: none;
\t margin: 0;
\t padding: 0;
}
.article-category {
\t padding: 0.5em;
\t margin-right: 0.5em;
\t display:inline-block;
\t background-color: #fff;
\t border-radius: 50px;
}
.article-box h1 {
\t margin: 0.5em 0;
\t padding: 0;
}
.article-box a:link, .article-box a:visited {
\t text-decoration: none;
\t color: #26A65B;
};
/* THIS ONE DOESN'T WORK */
.article-box a:hover {
\t color: #913D88;
};<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> \t Articles | PTC Testers
</title>
<meta name="description" content="Pay to click sites testing">
<meta name="author" content="Shooshte">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<link rel="stylesheet" type="text/css" href="css/ionicons.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/articles.css">
</head>
<body>
<header>
<h1>PTCTesters<small>.com</small></h1>
<ul>
<li><a href="http://topdeckandwreck.com/PTC_php">home</a></li>
<li><a href="http://topdeckandwreck.com/PTC_php/articles">articles</a></li>
<li><a href="http://topdeckandwreck.com/PTC_php/sites">sites</a></li>
<li><a href="http://topdeckandwreck.com/PTC_php/contact">contact</a></li>
<li><a href="http://topdeckandwreck.com/PTC_php/login">login</a></li>
</ul>
</header>
<div id="content">
\t <div id="articles-sidebar">
\t \t <h2>Search articles archive:</h2>
\t \t <form>
\t \t \t <input type="text" placeholder="author, title, keyword...">
\t \t \t <input type="submit" value="Search">
\t \t </form>
\t </div>
\t <div id="articles-feed">
\t \t <div class="article-box free">
\t \t \t <h1><a href="#">Article title</a></h1>
\t \t \t <ul class="article-categories">
\t \t \t \t <li class="article-category"><a href="#">milestone</a></li>
\t \t \t \t <li class="article-category"><a href="#">strategy guide</a></li>
\t \t \t \t <li class="article-category"><a href="#">free</a></li>
\t \t \t </ul>
\t \t \t <h3><a href="#">Article Author</a> | Date posted</h3>
\t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris convallis congue malesuada. Cras in lacinia urna, ut malesuada ex. Ut tempor dignissim ex, vel congue mi tristique vel. Duis non nisi congue, malesuada enim et, ornare nunc. Donec auctor mattis neque, eget hendrerit ante euismod at. Donec quis sem facilisis, pretium dui at, mattis est. Cras tristique ultrices ipsum, id ornare diam egestas quis. Aliquam pulvinar turpis sit amet lacinia laoreet. In scelerisque vitae neque et pulvinar. Donec auctor turpis erat, ut tincidunt risus aliquam non. </p>
\t \t </div>
\t \t <div class="article-box members">
\t \t \t <h1><a href="#">Article title</a></h1>
\t \t \t <ul class="article-categories">
\t \t \t \t <li class="article-category"><a href="#">milestone</a></li>
\t \t \t \t <li class="article-category"><a href="#">strategy guide</a></li>
\t \t \t \t <li class="article-category"><a href="#">free</a></li>
\t \t \t </ul>
\t \t \t <h3><a href="#">Article Author</a> | Date posted</h3>
\t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris convallis congue malesuada. Cras in lacinia urna, ut malesuada ex. Ut tempor dignissim ex, vel congue mi tristique vel. Duis non nisi congue, malesuada enim et, ornare nunc. Donec auctor mattis neque, eget hendrerit ante euismod at. Donec quis sem facilisis, pretium dui at, mattis est. Cras tristique ultrices ipsum, id ornare diam egestas quis. Aliquam pulvinar turpis sit amet lacinia laoreet. In scelerisque vitae neque et pulvinar. Donec auctor turpis erat, ut tincidunt risus aliquam non. </p>
\t \t </div> \t \t
\t </div>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<footer>
© PTC-Testers, 2015
</footer>
</body>
</html>
где вы хотите парить ??? –
на всех ссылках внутри .article-box –