[英]HTML/CSS making a mouse over button to display footer
So for my project I've setup a fixed header and footer but noticed that my footer is rather large. 因此,对于我的项目,我已经设置了固定的页眉和页脚,但是注意到我的页脚相当大。 What I'd like to do is hide it and add a button toward the bottom that when you hover over will display the whole footer.
我想做的是将其隐藏,并向底部添加一个按钮,当您将鼠标悬停在上方时,它将显示整个页脚。
Here is my current website: http://webcomp41.volume11.com/final/index.html 这是我当前的网站: http : //webcomp41.volume11.com/final/index.html
How would I go about adding this feature? 我将如何添加此功能? Any help is greatly appreciated!
任何帮助是极大的赞赏!
CSS Solution: (show/hide completely) CSS解决方案:(完全显示/隐藏)
for it to work, you just need to make the button and the footer siblings 要使其正常工作,您只需要制作按钮和页脚同级即可
#footer
{
display: none;
}
#button:hover ~ #footer
{
display: block;
}
you can use the same technique to specify different size instead of show/hide. 您可以使用相同的技术来指定不同的大小,而不是显示/隐藏。
and as Ali Sheikhpour said: notice: replace the word "button" with the ID of button and "footer" with the ID of footer. 正如Ali Sheikhpour所说:注意:将“ button”一词替换为button的ID,将“ footer”替换为footer的ID。
jquery solution: jQuery的解决方案:
$("#button").hover(function(){$("#footer").show()})
notice: replace the word "button" with the ID of button and "footer" with the ID of footer. 注意:将“ button”一词替换为button ID,将“ footer”替换为footer ID。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.