懸停不同的對象與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的鏈接。

如果你想然而顯示的iframe，你必須使用兄弟選擇+

使用這樣的：

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

回答

相關問題