Question

我有2个隐藏的div和1个flash对象。当我将光标悬停在flash-object容器上时，我想在对象顶部显示2个div。

＆＃13;

.chat-video {
  width: 100%;
  height: 100%; }
.chat-topic {
  color: #F5F5F5;
  padding: 3px 7px 5px;
  background: #333333;
  /* The Fallback */
  background: rgba(51, 51, 51, 0.8);
  -moz-background: rgba(51, 51, 51, 0.8);
  -o-background: rgba(51, 51, 51, 0.8);
  -ms-background: rgba(51, 51, 51, 0.8);
  -webkit-background: rgba(51, 51, 51, 0.8);
  border: 1px solid #333333;
  border-bottom-color: #88658F;
  position: absolute;
  top: 0;
  width: 100%;
  height: 30px;
  overflow: hidden;
  font-size: 15px;
  z-index: 3;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease; }

.chat-controls,
.chat-topic {
  opacity: 0;
  -moz-opacity: 0;
  -o-opacity: 0;
  -ms-opacity: 0;
  -webkit-opacity: 0; }

.chat-video:hover .chat-topic {
  opacity: 1;
  -moz-opacity: 1;
  -o-opacity: 1;
  -ms-opacity: 1;
  -webkit-opacity: 1; }

.chat-video:hover .chat-controls {
  opacity: 1;
  -moz-opacity: 1;
  -o-opacity: 1;
  -ms-opacity: 1;
  -webkit-opacity: 1;
}

.chat-controls {
  position: absolute;
  top: 40px;
  left: 10px;
  font-size: 17px;
  color: #8c8c9c;
  display: block;
  list-style: none;
  z-index: 3;
  -moz-z-index: 3;
  -o-z-index: 3;
  -webkit-z-index: 3;
  -ms-z-index: 3;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease; }

.chat-controls li {
  padding: 2px 5px;
  background: #333333;
  /* The Fallback */
  background: rgba(51, 51, 51, 0.8);
  -moz-background: rgba(51, 51, 51, 0.8);
  -o-background: rgba(51, 51, 51, 0.8);
  -ms-background: rgba(51, 51, 51, 0.8);
  -webkit-background: rgba(51, 51, 51, 0.8);
  margin-bottom: 5px;
  border-radius: 2px;
  text-align: center; }

.chat-controls li a {
  color: #8c8c9c; }

.chat-controls li a:hover {
  color: #88658F;
  cursor: hand; }

＆＃13;

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
    <div class="chat-video">
        <div class="chat-topic" id="topic-container">
            <span class="primary" style="float:left;">
                TOPIC
            </span>
            <span id="topicMsg" style="color: #f5f5f5;float: left;"></span>
        </div>
        <div class="video_box" id="videoHolder">
            <div id="flash-object">
                <p>In order to view this object you need Flash Player 9+ support!</p>
                <a href="http://www.adobe.com/go/getflashplayer">
                    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/>
                </a>
            </div>
        </div>

        <ul class="chat-controls">
            <li><a onclick="foo();" data-toggle="titleButton" data-placement="right" title="Home"><i class="fa fa-home"></i></a></li>
            <li><a onclick="foo();" target="_blank" data-title="Profile"><i class="fa fa-user"></i></a></li>
            <li><a onclick="foo();"  data-title="titleButton"><i class="fa fa-photo"></i></a></li>
            <li><a onclick="foo();" data-title="titleButton"><i class="fa fa-database"></i></a></li>
        </ul>

    </div>

＆＃13;

所以问题是我的div在Chrome浏览器中显示，但在Opera，Firefox和我认为IE没有显示....我真的需要它们至少对于Opera和Firefox。我尝试用jquery做这件事，但动画根本不光滑而且有bug。我不知道我的CSS问题出在哪里。任何建议都会非常感激。

你需要一个flash对象来测试它......

在其他浏览器中未显示在Flash对象上的Div

0 个答案: