埋め込み動画を開始した後、HTML - ホバリングがSafariで機能しません。 FIrefoxでの作業

Question

私は自分のウェブサイトを改造し、可能ならば私が助けたいと思う2つの問題にヒットしました。

テストサイトへのリンクは、ページのロード時にダウンロードしないように、私はポスターで埋め込まビデオを追加してい）http://elovideo.com/test/index.html

1です。 Firefoxでページを表示してムービーをクリックすると、ホバーは他のハイパーリンクでも機能します。私のリンクが点灯し、下線が表示されるか、その項目が選択可能であることを示す手がすべて表示されます。

Safariでは、ビデオが選択されると、私のホバーは動作しません。私はまだリンクをクリックすることができますが、私のサイトに新しい人は、テキストの一部がハイパーリンクであることに気付かないでしょう。ホバーは、表示/読み込み用のビデオを選択する前に正常に動作します。

2）動画をFirefoxで再生すると、ビデオビューアの周囲に点線のボックスが表示されます。私はそれが起こるのを止めることができるようにしたいと思います。それはSafariでは起こりません。

私は、コードを書くことに高度に熟練していないので、ユーザーの誤りには間違いがあります。どんな助けでも大歓迎です。私が間違ったことをしているなら、私に知らせてください。

ありがとうございます！ BELOW エリカ

スタイルシートCSSコード - HTMLは、上記のウェブサイトのソース上で閲覧することができます。

html, body , ul, li { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
img { 

    border: 0; 
} 
a { 
    font-weight: bold; 
    text-decoration: none; 
} 
a:hover { 
    text-decoration: underline; 
} 
.more { 
    text-align: right; 
} 
.left { 
    float: left; 
} 
.clear { 
    clear: both; 
} 

body, h1, h2, h3, form { 
    font: 14px tahoma, arial, sans-serif; 
    margin: 0; 
    padding: 0; 
    color: #7a895d; repeat-x; 

} 

body { 

    background: #7a895d url(images/headerback.jpg) repeat-x; 



    text-align: left; 
} 

#bodyinner { 
    background: url(images/white.jpg) repeat-y; 



    width: 960px; 

    margin: 0; 
    padding: 10px 30px 20px 10px; 
    z-index: 2; 
} 



#wrapper { 
    text-align: left; 
    margin: auto; 
    width: 1000px; 
    background: #7a895d ; 

} 


#header { 
    height: 100px; 
    position: absolute; 


} 
#header h1 { 
    margin-top: 0px; 
} 
#header h1 img { 
    display: block; 

} 

#bnav { 
    margin-top: 0px; 
    margin-left: 200px; 



} 
#bnav img { 
    float: left; 
} 



#nav { 
    margin-top: -80px; 
    margin-left: 200px; 



} 
#nav img { 
    float: left; 
} 

#headline { 
    padding: 210px 0px 0px 10px; 


} 

#photo { 
    float: left; 
    width: 624px; 
} 
#photo div { 
    border: 1px solid #a5b87c; 
    padding: 2px; 
} 
#photo img { 
    display: block; 
} 

#search-news { 
    float: right; 
    width: 240px; 



} 
#search-news div { 
    padding: 0px 0px 0px 0px; 

} 
#search-news #q { 
    width: 240px; 
    border: 1px solid #859D31; 
    margin: 1em 0 0 1em; 
} 
#search-news .downcast { 
    background: #E6E7E7; 
    border-top: 1px solid #CFD0D0; 
    padding: 0px 3px 3px 3px; 
    margin: 0.2em 0 0.4em 1em; 
} 
#search-news h3 { 
    background: url(images/bullet_letter.gif) no-repeat; 
    padding-left: 15px; 
    font-weight: bold; 
    margin: 1em 0 0.4em 1em; 


} 
#search-news p { 
    padding-left: 15px; 

    padding-right: 2px; 
    margin: 1em 0 0.4em 1em; 
background: #7a895d repeat-x; 
} 
a { 
    font-weight: bold; 
    color: #5C5C5C; 

} 



#body-left { 
    float: left; 
    margin: 20px; 
    width: 408px; 

} 
#body-right { 
    float: right; 
    margin: 20px; 
    width: 450px; 

} 

#body-full { 
    float: left; 
    width: 1000px; 


} 



#body-left ul.plussbullets { 
    margin-top: 245px; 
    margin-left: 120px; 
    padding: 0; 
    font-weight: bold; 
    position: relative; 


} 
#body-left ul.plussbullets li { 
    background: top left url(images/bullet_plus.gif) repeat-x; 
    margin: 0 0 10px 0; 
    padding: 0 0 0 25px; 
    position: relative; 
} 

#body h2, #body p { 
    margin: 0.3em 0; 

} 

#body-right p { 
    margin-right: 2em; 

} 

#body a.green { 
    color: #9AAB68; 
    font-weight: normal; 
    text-decoration: underline; 
} 

#gallery img { 
    float: left; 
    padding: 0 0 5px 5px; 

} 

#footer { 
    color: #FFFFFF; 

    background: #42453D url(images/footer_bg.gif) repeat-x; 
    padding: 10px 10px 10px 10px; 

    font-weight: bold; 
} 
#footer p { 
    margin: 0; 
    text-align: center; 
    padding: 0px; 
} 

Answer 1

あなたの最初の質問では何が参照されているのかよくわかりません。いずれのブラウザタイプでも、ホバーが動作することはありません。

概要：点線の除去に関しては

は、あなたのオブジェクトに対して、以下のCSSを使用しますなし。