0

CSS:

body {
    background-image: url("../images/ITWorld.jpg");
    background-repeat: no-repeat;
    background-size: 150%;
    font-family: sans-serif;
}

p {
    font-size: 22px;
}

#navbar {
    display: inline;
    text-align: center;
    font-size: 25px;
}

a {
    text-decoration: none;
    font-family: sans-serif;
    color: black;
}

.listitem {
    padding: 7px;
    display: inline;
    border: 3px solid black;
}

a:hover {
    color: white;
}

.reference {
    font-size: 22px;
    padding-top: 50px;
    padding-bottom: 50px;
}

#overviewpara {
    width: 800px;
}

.referenceli {
    padding: 5px;
}

HTML:

<ul>
    <li class="referenceli"><a class="reference" href="http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm">http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm</a></li>
    <li class="referenceli"><a class="reference" href="http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011">http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011</a></li>
</ul>

My problem is that when i hover over my hyperlinks on my references page they do not react in the correct areas. For example I'll be link 5px above the link and it will not higligh or i will be right over the link, but it will not work. Sorry for messy html.

4

4 回答 4

1

你应该在你的标签上设置 5px 的填充，而不是你的列表项。

.referenceli {
    padding: 5px;
}

应该

.reference {
    padding: 5px;
    text-decoration: none;
    font-family: sans-serif;
    color: black;
}

还要从 a 标签中删除 50px 填充：您最好将该尺寸（50px）应用于列表项的边距：

.reference {
    font-size: 22px;
    padding-top: 50px;
    padding-bottom: 50px;
}

应该

.reference {
    font-size: 22px;
    padding: 5px; /*So you will have a hover effect 5px below and above the link*/
}

.referenceli {

    margin: 50px 0px;
}
于 2013-04-22T05:10:15.270 回答
1

将顶部和底部的填充更改为 5px：

.reference {
    font-size: 22px;
    padding-top: 5px;
    padding-bottom: 5px;
}

小提琴：http: //jsfiddle.net/uNpbk/

于 2013-04-22T05:19:45.383 回答
0

将顶部和底部的填充更改为 5px：

.reference 
{
    font-size: 22px;
    padding-top: 5px;
    padding-bottom: 5px;
}
于 2013-04-22T05:25:21.513 回答
0

试试这个。我认为您需要设置 div 而不是 li 标签的样式。我在参考和参考中添加了一些边框。将边框添加到您的代码中以查看您对样式的影响。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
<style>
body {
    background-image: url("../images/ITWorld.jpg");
    background-repeat: no-repeat;
    background-size: 150%;
    font-family: sans-serif;
}

p {
    font-size: 22px;
}

#navbar {
    display: inline;
    text-align: center;
    font-size: 25px;
}

a {
    text-decoration: none;
    font-family: sans-serif;
    color: black;
}

.listitem {
    padding: 7px;
    display: inline;
    border: 3px solid black;
}

a:hover {
    color: red;
    font-weight:bold;
}

.reference {
    font-size: 22px;
    padding:10px 0 10px 0;
    border:green solid 1px;
}

#overviewpara {
    width: 800px;
}

div.referenceli{
   padding:20px 0 0 0;
   border:red 1px solid;
}
</style>
<ul>
  <div class="referenceli"><!--USE DIV TO FOCUS CSS -->
    <li><a class="reference" href="http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm">http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm
    </a></li><!-- END LI -->
  </div><!-- END REFERENCELI -->
  <div class="referenceli">
    <li><a class="reference" href="http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011">http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011
    </a></li><!-- END LI -->
  </div><!-- END REFERENCELI -->
</body>
</html>
于 2013-04-22T05:25:50.823 回答