cssで別のオブジェクトにカーソルを移動

iframeコードを別のリンクにマウスオーバー（ホバー）して表示するにはどうすればよいですか？私はこれを試しましたが、うまくいきません。cssで別のオブジェクトにカーソルを移動

<style> 
iframe#xyz { 
    border: 2px solid #9a9a9a; 
    margin-left: 60px; 
    display: none; 
    margin-top: 25px; 
    background-color: #FFF; 
    position: absolute; 
} 

a#abc:hover iframe#xyz { 
    border: 2px solid #9a9a9a; 
    width: 200px; 
    height: 100px; 
    margin-left: -18px; 
    display: block; 
    margin-top: 25px; 
    background-color: #FFF; 
    position: absolute; 
} 
</style> 

<a class="linkclass" id="abc" href="link">link</a> 
<iframe id="xyz" src="page.html"></iframe>

私は間違っていますか？あなたはそれが間違っ、使用することを選択している

出典

2016-09-18 Mert

にしないでくださいスニペットで作業ファイルを追加できます – Dhaarani

iframeはaの開閉タグ内にある必要があります –

@JosephYoung動作します、ありがとうございます！ – Mert

：

a#abc:hover { 
    border: 2px solid #9a9a9a; 
    width: 200px; 
    height: 100px; 
    margin-left: -18px; 
    display: block; 
    margin-top: 25px; 
    background-color: #FFF; 
    position: absolute; 
}

abcのIDとのリンクを選択します。

あなたはしかし、インラインフレームを表示したい場合は、この兄弟セレクタ+

使用を使用する必要があります。

a#abc:hover + #xyz { 
    border: 2px solid #9a9a9a; 
    width: 200px; 
    height: 100px; 
    margin-left: -18px; 
    display: block; 
    margin-top: 25px; 
    background-color: #FFF; 
    position: absolute; 
}

出典

2016-09-18 10:29:22 Akar

彼らは、タグではなく、iframeを表示したい –

私の答えが更新されました。 – Akar

このよう

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
    <style> 
 
    #xyz{ 
 
     display: none; 
 
    } 
 
    .linkclass:hover + #xyz{ 
 
     display: block; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <a href="#" class="linkclass">Click Here To View Map</a> 
 
    <iframe id="xyz" src="#" width="870" height="300"></iframe> 
 
</body> 
 
</html>

出典

2016-09-18 10:47:18

cssで別のオブジェクトにカーソルを移動

答えて

関連する問題