[英]CSS hover Only Works On The Top Half of My Button
I'm really pulling my hair out on this one. 我真的很喜欢这支头发。 I don't do webpages professionally or on a regular basis;
我没有专业或定期的网页; and I'm really stumped.
我真的很沮丧
You can go to my work-in-progress page here: 您可以在这里转到我的进行中页面:
http://damienivan.com/wip/042/ http://damienivan.com/wip/042/
If you hover over one of the buttons below "featured work," the hover state and "link finger" only appear if your cursor is over the top half of the button. 如果将鼠标悬停在“功能突出”下方的按钮之一上,则仅当光标位于按钮的上半部分上方时,才会显示悬停状态和“链接指”。
The CSS is: CSS是:
.work_button
{
width: 174px;
height: 58px;
float: left;
background: #3FC0E9;
border-right: 4px solid #30A9D0;
}
.work_button:hover
{
background: #FFF;
color: #30A9D0;
}
The HTML is: HTML是:
<a href="demo_reel.html" target="video_player">
<div class="work_button">
<h2>demo reel</h2>
</div>
</a>
The full CSS file is at: 完整的CSS文件位于:
http://damienivan.com/wip/stylesheets/main.css http://damienivan.com/wip/stylesheets/main.css
Thanks in advance! 提前致谢! I'm really stuck here.
我真的被困在这里。
-Damien -达米恩
Try to increase height of your work_wrapper 尝试增加work_wrapper的高度
Try this: 尝试这个:
#work_wrapper {
height: 125px;
padding-top: 14px;
position: relative;
width: 890px;
}
Or You can also try this 或者您也可以尝试
#footer_wrapper { clear: both; }
The problem is that your #work_wrapper div has a fixed height (bad idea). 问题是您的#work_wrapper div的高度固定(不好的主意)。 Remove that height, and instead set it to
overflow: hidden
so that it wraps around your buttons: 删除该高度,而是将其设置为
overflow: hidden
以便环绕您的按钮:
#work_wrapper {
width: 890px;
height: 100px; /* REMOVE THIS */
padding-top: 14px;
position: relative;
overflow: hidden; /* ADD THIS */
}
Also, you shouldn't really be using a div
and h2
inside your links. 另外,您实际上不应该在链接内使用
div
和h2
。 Strip them out, and do this instead: 将它们剥离,然后执行以下操作:
HTML: HTML:
<a href="demo_reel.html" target="video_player">demo reel</a>
CSS: CSS:
#work_button_wrapper a {
display: block;
float: left;
width: 174px;
text-align: center;
line-height: 58px;
background: #3FC0E9;
font-size: 1.25em;
}
#work_button_wrapper a:hover {
background: white;
color: #3FC0E9;
}
This css statement can help you: 此css语句可以帮助您:
#footer_wrapper { clear: both; }
BTW: Nesting a div into an anchor tag ist not valid. 顺便说一句:将div嵌套到锚标记中无效。
Use Google Chrome or Mozilla Firefox to debug your web-page. 使用Google Chrome或Mozilla Firefox调试您的网页。 Both browsers have an option to use the webdeveloper tools, which will allow you to visualize the CSS better.
两种浏览器都有使用Webdeveloper工具的选项,这将使您更好地可视化CSS。 This will help you actually see what is happening, and in this case, there is a cssobject blocking half of your button.
这将帮助您实际看到正在发生的情况,在这种情况下,有一个cssobject会阻塞按钮的一半。 A great plus in this in Firefox is that it has a 3D-view option.
在Firefox中,此功能的一大优点是它具有3D视图选项。 It looks geeky at first, but it can be REALLY helpful when trying to view what is going on in the CSS.
一开始看起来很怪异,但是在尝试查看CSS发生的事情时确实很有帮助。
The problem is the footer of your page. 问题是页面的页脚。 It's above the buttons.
在按钮上方。
Give the buttons a z-index and it will work great! 给按钮一个z索引,它将很好用!
You can always give your footer a z-index:-1;
您总是可以将页脚的
z-index:-1;
Buttons will be shown on top and have a hover on the whole button 按钮将显示在顶部,并在整个按钮上悬停
You're mixin inline and block elements. 您在混合内联和块元素。 Inspect the H2 and you see the clickable elements ends there.
检查H2,您会看到可点击元素在此处结束。
Refactored HTML below: 以下是重构的HTML:
<div id="work_button_wrapper">
<a href="demo_reel.html" class="work_button" target="video_player">
demo reel
</a>
<a href="hp.html" class="work_button" target="video_player">
hp
</a>
<a href="free_world.html" class="work_button" target="video_player">
free world
</a>
<a class="work_button" href="dabo.html" target="video_player">
dabo
</a>
<a class="work_button" href="sugar_skull.html" target="video_player" class="work_button work_button_last">
sugar skull
</a>
</div>
CSS: CSS:
body {
font: 17px/19px Helvetica, sans-serif;
color: #FFF;
}
#work_button_wrapper
{
width: 890px;
float: left;
padding-top: 9px;
overflow:hidden;
}
.work_button
{
width: 174px;
float: left;
overflow: hidden;
background: #3FC0E9;
border-right: 4px solid #30A9D0;
color: #fff;
text-decoration: none;
display: block;
font-size: 24px;
font-weight: normal;
letter-spacing: -1.5px;
text-align: center;
padding: 20px 10px;
}
.work_button:hover
{
background: #FFF;
color: #30A9D0;
}
.work_button_last
{
width: 178px;
border-right: 0px solid #30A9D0;;
}
http://jsfiddle.net/brutusmaximus/ZPunN/ http://jsfiddle.net/brutusmaximus/ZPunN/
Move a tag
inside the div
and add width and height for a tag (Already you are giving height and width
for the div which is covering the a tag so there is no wrong in giving the same height
and width
to the a tag
) 将
a tag
内div
并添加宽度和高度标签(你们已经给予height and width
为它覆盖标签的DIV因此在给予同样的没有错height
和width
的a tag
)
#work_button_wrapper
{
width: 890px;
float: left;
padding-top: 9px;
/* border: 2px solid #FFF; */
}
.work_button
{
width: 174px;
height: 58px;
float: left;
background: #3FC0E9;
border-right: 4px solid #30A9D0;
text-align:center
}
.work_button a
{
text-decoration: none;
font-size: 15px;
color: #FFF;
height:58px;
width:174px
}
h2{
height:100%; width:100%
}
.work_button a:hover
{
background: #FFF;
color: #30A9D0;
}
.work_button_last
{
width: 178px;
border-right: 0px solid #30A9D0;;
}
#work_button_wrapper a:hover
{
/* background: #3FC0E9; */
background: #FFF;
color: #30A9D0;
}
.work_button:hover
{
background: #FFF;
color: #30A9D0;
}
I had same problem. 我有同样的问题。 For me a parent div had position:fixed and was invisibly above the button, which was difficult to pinpoint.
对我来说,父div的位置是:固定的,并且在按钮上方不可见,这很难确定。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.