0

So I am having this problem and I can figure out how to do it when on other pages it works fine but with video don't. I would be grateful for any advice. It quite long but I hope understandable. I ve left there only hover selectors I think problem is there.

<ul id="menu" class="topmenu">
    <li class="topmenu"><a href="index.php"><span class="active">Bruce VS Crowan</span></a>
    <ul>
        <li class="subfirst"><a href="oprojektu.html" >O projektu</a></li>
        <li><a href="obrazky.php" >Obrázky</a></li>
        <li class="sublast"><a href="video.html" ><span class="active">Video</span></a></li>
    </ul></li>
    <li class="topmenu"><a href="#">Moje tvorba</a>
    <ul>
        <li class="subfirst"><a href="#">Klient-server chat</a></li>
        <li><a href="#">Správa publikací</a></li>
        <li><a href="#" >Adventura</a></li>
        <li class="sublast"><a href="#" >Ostatní</a></li>
    </ul>
    </li>
</ul>
<table class="film"><tr><td>
<video controls="controls" >
<source src="video/BVSC.mp4" type='video/mp4'>
</video>
</td></tr></table>

ul#menu li:hover>*{
    display:block;}
ul#menu li:hover{
    position:relative;}
ul#menu li:hover>a{
    background-color:#66FF00;
    -webkit-transition: background-color 150ms linear;
     -moz-transition: background-color 150ms linear;
     -o-transition: background-color 150ms linear;
     -ms-transition: background-color 150ms linear;
     transition: background-color 150ms linear;
    border-color:#F8F8F8;
    border-style:solid;
    font:12px Courier New;
    color:#333;
    text-decoration:none; 
    background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(85,170,0,0.7));
    background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(0,170,0,0.7)));
    }
ul#menu img{
    border:none;vertical-align:middle;margin-right:8px;}
ul#menu img.over{
    display:none;}
ul#menu li:hover > a img.def{
    display:none;}
ul#menu li:hover > a img.over{
    display:inline;}
ul#menu li.topmenu:hover > a {
    background-color:#3F0; 
    background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.77),rgba(50,50,0,0.8));
    background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(50,50,0,0.8)));
    border-style:solid;
    border-color:#F8F8F8;
    font:bold 12px Courier New;
    color:#FFF;
    text-decoration:none;
    text-shadow:0 0px 0 #C5EAA1;
    line-height:13px;
}
ul#menu li.subfirst>a{
    border-radius:9px 9px 0 0;
    -moz-border-radius:9px 9px 0 0;
    -webkit-border-radius:9px;
    -webkit-border-bottom-right-radius:0;
    -webkit-border-bottom-left-radius:0;

    }
ul#menu li.sublast>a{
    border-radius:0 0 9px 9px;
    -moz-border-radius:0 0 9px 9px;
    -webkit-border-radius:0;
    -webkit-border-bottom-right-radius:9px;
    -webkit-border-bottom-left-radius:9px;
    }
ul#menu.topmenu {
max-width:1018px;
min-width:630px;
width: 100%;
    }
.film {
    border:ridge #66FF00;
    background-color:#000000;
    margin: 0 auto; 
    }
4

1 回答 1

0

视频有一个讨厌的习惯,即根据您使用的播放器类型,在其他内容之上播放。您是否在其他元素上尝试过 z-index?http://www.w3schools.com/cssref/pr_pos_z-index.asp

于 2013-08-08T22:48:42.730 回答