Question

所以我遇到了这个问题，我可以弄清楚如何在其他页面上做到这一点它工作正常，但视频没有。我会很感激任何建议。这很长，但我希望可以理解。我离开那里只有悬停选择器，我认为问题在那里。

<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; 
    }

Answer 1

根据您使用的播放器类型，视频有一种讨厌其他内容的恶习。你在其他元素上尝试过z-index吗？ http://www.w3schools.com/cssref/pr_pos_z-index.asp

当我使用鼠标进行视频但仍然悬停子菜单时，子菜单消失

1 个答案: