0

I'm working on a site here:

http://www.jasnasyogaonline.com/membership-test.php

And if you hover over the right nav, you'll see a fade in effect that happens where the background animates to the top and bottom from the middle of the link. In between the three colored lines (the border of the right nav) you'll see that there is white color. This is because on the other pages of the site, the background is white and the original programmer just used a background image to create the 'diagonal' edge of the nav item. Now that there is a full page video/image, this doesn't work because the background isn't white and the effect is lost.

My client is now looking to just have it be transparent between the razor lines but keep the nav items with the diagonal edges. If I removed the images on the end of the nav item, they just become straight rectangles. I've tried some CSS with borders/border-widths, etc. but it's a little tricky because if you look at the source code, the background is being generated by a PHP file that's using imagecreatetruecolor to create the hover effect.

Any ideas on how to cut the corner off of the right nav while keep the area between the razor lines transparent? I'm beginning to run out of ideas. Thanks for your help!

4

2 回答 2

1

我的建议是把悬停边缘 div 放在一起

  .nav ul li div {

使用背景精灵/动画重新编码动画。实际上，我根本不喜欢鼠标悬停效果。也许你可以向客户推销一些更容易做的事情，比如文本外发光或下划线效果。

另外：这篇文章与 PHP 没有任何关系

于 2013-10-14T19:59:43.390 回答
-1

编辑我想不出另一种方法可以实现，但如果你想要这个设计，你可以尝试。

.nav ul li a:hover {
color: #FFFFFF;
text-decoration: none;
-moz-border-radius: 10em 0em 10em 0em;
border-radius: 10em 0em 10em 0em;
text-align: center;
}
于 2013-10-14T20:34:25.897 回答