首页 文章

导航链接背景在悬停时淡出

提问于
浏览 次
0

我正在一个小型网站上作为我的Web开发类的决赛 . 目前，我正在尝试配置随机背景图像淡入的导航链接，同时用鼠标将鼠标悬停在它们上面 . 我将有一个包含十几个图像的文件夹 .

我一直在努力使这个解决方案适应我想要做的事情：

https://sonspring.com/journal/easy-random-css-backgrounds

可以在此处找到链接到 nav ul a:hover 选择器的php脚本：

https://alistapart.com/d/randomizer/rotate.txt

CSS：

nav {
    float: right; text-align: center; padding: 0.5em;
    margin-left: 1.5em;
}
nav ul {
    list-style-type: none;
    padding-right: 0;
    font-size: 1.1em;
}
nav ul li a {
    color: #000000;
    margin-bottom: 1em;
    border: 1px solid #dcdcdc; 
    padding: 1em 1.5em; 
    border-radius: 0.23em;
    display: block;
    text-decoration: none;
    transition: background-image 3s ease-in-out;
}
nav ul li a:hover {
    text-decoration: none;
    color: #000000;
    /*****URL TO PHP SCRIPT PROVIDED IN THE LINK ABOVE*****/
    background-image: url(scripts/rotator/rotator.php);
    backgound-position: center; background-repeat: no-repeat;
    background-size: cover;
}
nav ul li a:visited {
    text-decoration: none;
    color: #000000    
}
nav ul li a:active {
    text-decoration: none;
    color: #000000
}

HTML：

<nav>
<ul>
    <li><a href="index.html">page1</a></li>
    <li><a href="page2.html">page2</a></li>
    <li><a href="page3.html">page3</a></li>
    <li><a href="page4.html">page4</a></li>
    <li><a href="page5.html">page5</a></li>
</ul>
</nav>

任何帮助或建议将不胜感激 . 非常感谢

编辑：为了澄清，图像将显示为各个导航按钮本身的背景图像，而不是整个页面的背景或整个导航元素 .

html css hover nav fade

1 回答

  • 0
    nav {
    float: right; text-align: center; padding: 0.5em;
    margin-left: 1.5em;
}
nav ul {
    list-style-type: none;
    padding-right: 0;
    font-size: 1.1em;
}
nav ul li a {
    color: #000000;
    margin-bottom: 1em;
    border: 1px solid #dcdcdc; 
    padding: 1em 1.5em; 
    border-radius: 0.23em;
    display: block;
    text-decoration: none;
    transition: background 2s ease-out;
}
nav ul li a:hover {
    text-decoration: none;
    color: #ccc;
    cursor: pointer;
}
nav ul li a:visited {
    text-decoration: none;
    color: #c93838    
}

    选择器问题使用nav ul li a {}而不是nav ul a {}

    回复于

相关问题