顯示懸停的外部div

我創建了一個導航，現在我想添加預覽器來獲取相關選項。顯示懸停的外部div

該div未連接到導航，但需要在懸停時顯示。研發的「小時」後，我投降了：/

這裏是我的簡化代碼

<div class="col"> 
    <div class="content">lorem ipsum</div> 
</div> 
<div class="col"> 
    <div class="navigation"> 
    <ul> 
     <li><a href="#">punkt</a></li> 
    </ul> 
    </div> 
</div>

象前面說，我想說明的股利不在導航（爲響應原因）。

是否可以處理這與純CSS或JavaScript是必要的？我希望事實並非如此 - 我的JavaScript技能不存在：D

感謝您的幫助！

來源

2016-03-17 Chumminerd

我不相信這對純CSS來說是可能的。這雖然很容易與JavaScript;您只需在「trigger」元素上設置事件處理程序即可。併發布*所有*你的代碼，而不是codepen。 – Carcigenicate

可悲的是（幸運），你不能「導航」使用CSS了DOM樹。你只能瞄準下一個兄弟姐妹和子元素（你可能已經知道了）。

JavaScript可以幫助你在這個具體情況：

function showTarget(el) { 
 

 
    var target = document.querySelector("[data-target='"+ el.dataset.hovershow +"']"); 
 

 
    el.addEventListener("mouseenter", function() { 
 
    target.classList.add("visible"); 
 
    }); 
 

 
    el.addEventListener("mouseleave", function() { 
 
    target.classList.remove("visible"); 
 
    }); 
 

 
} 
 

 
[].forEach.call(document.querySelectorAll("[data-hovershow]"), showTarget);

.navigation{ position:fixed; bottom: 30px; } 
 
.content   { display: none; } 
 
.content.visible { display: block; }    /* "visible" class is toggled by JS */

<div class="col"> 
 
    <div class="content" data-target="1">1 lorem ipsum</div> 
 
    <div class="content" data-target="2">2 lorem ipsum</div> 
 
</div> 
 

 
<div class="col"> 
 
    <div class="navigation"> 
 
    <ul> 
 
     <li><a href="#" data-hovershow="1">1 punkt</a></li> 
 
     <li><a href="#" data-hovershow="2">2 punkt</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

來源

2016-03-17 20:07:35

謝謝，你的答案是最有用的。它很棒，可以選擇顯示不同的div。注意：javascript必須在body標籤關閉前執行。否則它不起作用。當我錯了，Roko C. Buljan，請更正這個：D – Chumminerd

@Chumminerd不，你是完全正確的。如果不使用'DOMContentLoaded'回調（jQuery中的AKA document.ready），則需要在結束日期''之前放置'

如果移動的.contenthtml是a元素

.content { 
 
    display: none; 
 
} 
 
.navigation ul li a:hover + .content { 
 
    display: block; 
 
}

<div class="col"> 
 
</div> 
 
<div class="col"> 
 
    <div class="navigation"> 
 
    <ul> 
 
     <li><a href="#">punkt</a> 
 
     <div class="content">lorem ipsum</div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

來源

2016-03-17 19:51:33 guest271314

「downvote」說明？ – guest271314

由於具體原因，內容不嵌套在UL –

@ RokoC.Buljan _「由於具體原因，內容不嵌套在UL中」_嗯，爲什麼「downvote」可能的解決方案？在另一個你有問題/答案採取自由添加額外的內容解決方案在答案http://stackoverflow.com/a/36046964/？不要成爲僞君子 – guest271314

如果你不確定純CSS的相鄰兄弟，檢查了這一點： http://jsfiddle.net/raving/87865bq7/

<!-- normally this stuff would be on the html element --> 
<!--[if lt IE 7]> <div class="ie ie6 lte9 lte8 lte7"> <![endif]--> 
<!--[if IE 7]>  <div class="ie ie7 lte9 lte8 lte7"> <![endif]--> 
<!--[if IE 8]>  <div class="ie ie8 lte9 lte8"> <![endif]--> 
<!--[if IE 9]>  <div class="ie ie9 lte9"> <![endif]--> 
<!--[if gt IE 9]> <div> <![endif]--> 
<!--[if !IE]><!--> <div>    <!--<![endif]--> 
    <div class="wrapper"> 
    I have a tooltip. 
    <div class="tooltip">I am a tooltip!</div> 
    </div> 
</div>

CSS：

.wrapper { 
    text-transform: uppercase; 
    background: #ececec; 
    color: #555; 
    cursor: help; 
    font-family: "Gill Sans", Impact, sans-serif; 
    font-size: 20px; 
    margin: 100px 75px 10px 75px; 
    padding: 15px 20px; 
    position: relative; 
    text-align: center; 
    width: 200px; 
    -webkit-transform: translateZ(0); /* webkit flicker fix */ 
    -webkit-font-smoothing: antialiased; /* webkit text rendering fix */ 
} 

.wrapper .tooltip { 
    background: #1496bb; 
    bottom: 100%; 
    color: #fff; 
    display: block; 
    left: -25px; 
    margin-bottom: 15px; 
    opacity: 0; 
    padding: 20px; 
    pointer-events: none; 
    position: absolute; 
    width: 100%; 
    -webkit-transform: translateY(10px); 
    -moz-transform: translateY(10px); 
     -ms-transform: translateY(10px); 
     -o-transform: translateY(10px); 
      transform: translateY(10px); 
    -webkit-transition: all .25s ease-out; 
    -moz-transition: all .25s ease-out; 
     -ms-transition: all .25s ease-out; 
     -o-transition: all .25s ease-out; 
      transition: all .25s ease-out; 
    -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); 
    -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); 
     -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); 
     -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); 
      box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); 
} 

/* This bridges the gap so you can mouse into the tooltip without it disappearing */ 
.wrapper .tooltip:before { 
    bottom: -20px; 
    content: " "; 
    display: block; 
    height: 20px; 
    left: 0; 
    position: absolute; 
    width: 100%; 
} 

/* CSS Triangles - see Trevor's post */ 
.wrapper .tooltip:after { 
    border-left: solid transparent 10px; 
    border-right: solid transparent 10px; 
    border-top: solid #1496bb 10px; 
    bottom: -10px; 
    content: " "; 
    height: 0; 
    left: 50%; 
    margin-left: -13px; 
    position: absolute; 
    width: 0; 
} 

.wrapper:hover .tooltip { 
    opacity: 1; 
    pointer-events: auto; 
    -webkit-transform: translateY(0px); 
    -moz-transform: translateY(0px); 
     -ms-transform: translateY(0px); 
     -o-transform: translateY(0px); 
      transform: translateY(0px); 
} 

/* IE can just show/hide with no transition */ 
.lte8 .wrapper .tooltip { 
    display: none; 
} 

.lte8 .wrapper:hover .tooltip { 
    display: block; 
}

來源

2016-03-17 19:56:04 ErTR

這對於這項任務來說太過於誇張，但我認爲downvote並不合適。 – Carcigenicate

_「如果您確定純粹的css」_那麼它工作？是。但是，似乎有人有太多的代表，並且沒有解決投票的問題。我愛人民！ 3 < – ErTR

@ErtürkÖztürk - 感謝分享，非常有用。我發現它後退搜索「純CSS的工具提示」，然後谷歌搜索列出jsfiddle鏈接的網頁:-) – fzzylogic

如果你不想修改任何現有的標記，你可能需要用JavaScript來做到這一點。 '+'選擇器僅適用於DOM中同一級別的元素。由於您用於觸發內容div顯示的元素與DOM內容不在同一級別，因此此方法不起作用。如果我正確地理解這個，你正在嘗試做的可以用下面的jQuery來完成：

$('.navigation a').hover(function(e) { 
    $('.content').show(); 
}, function(e) { 
    $('.content').hide(); 
});

來源

2016-03-17 20:03:45 Jimmy

如果移動的.contenthtml是a元素的相鄰兄弟;設置position爲.content至absolute，調整left,top屬性以匹配第一個.col元素的位置，您應該能夠在視口內渲染.content類似於第一個元素的子元素的位置;也就是a元素以上;或者在視口內的任何位置。鑑於.contentdisplay設置爲none，如果.content旁邊放置a元素中html

.col:nth-of-type(1) { 
 
    top: 0px; 
 
    left:0px; 
 
} 
 

 
.content { 
 
    display: none; 
 
} 
 
.navigation ul li a:hover + .content { 
 
    display: block; 
 
    position: absolute; 
 
    left:0px; 
 
    top: 0px; 
 
}

<div class="col"> 
 
</div> 
 
<div class="col"> 
 
    <div class="navigation"> 
 
    <ul> 
 
     <li><a href="#">punkt</a> 
 
     <div class="content">lorem ipsum</div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

來源

2016-03-17 20:11:27 guest271314

酷解決方案。如果'.content'元素需要重疊以允許一個很好的淡入淡出效果（比任何情況下它們都*具有*爲絕對位置）更好。 –

@ RokoC.Buljan可能還有其他可能的'css'解決方案;仍在嘗試替代方案 – guest271314

唯一的解決方案是使用'click'和radio元素;或者再次點擊和「：target」僞。 –

下面是一個使用JavaScript（JQuery的）版本codepen它不應該的問題

$(document).ready(
    function(){ 
    $("#punkt").mouseover(function() { 
     $('.content').css('display','block'); 
    }); 
    $("#punkt").mouseout(function() { 
     $('.content').css('display','none'); 
    }); 
});

https://codepen.io/anon/pen/rejdqq?editors=1111

來源

2016-03-17 20:26:51 frazras

另一個css方法是利用::before僞元素，重新設定position:absolute，調整top，left值渲染視窗內的特定位置的文字或url

a:hover::before { 
 
    content: "lorem ipsum\A"; 
 
    position: absolute; 
 
    display:block; 
 
    top:8px; 
 
    left:60px; 
 
    color:green; 
 
}

<div class="col"> 
 
    <div class="content">content:</div> 
 
</div> 
 
<div class="col"> 
 
    <div class="navigation"> 
 
    <ul> 
 
     <li><a href="#">punkt</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

來源

2016-03-17 20:40:45 guest271314

您可以使用CMS插入內容嗎？在'：after'或'：before'僞元素中使用HTML標籤設置/插入內容很容易？ –

@ RokoC.Buljan _「你能使用CMS插入內容嗎？」_不能確定地解釋這部分評論;這裏沒有嘗試CMS。 _「在僞元素之後或之前使用HTML標籤來設置/插入內容很容易」_應該能夠在content屬性中使用文本或url（），其中value可以是數據URI或URL到外部資源，例如圖像，可能會呈現https://jsfiddle.net/95yoff8e/ – guest271314

真的嗎？您是否嘗試使用：after或：before僞從插入'page.html'中插入HTML？ –

相關問題

顯示懸停的外部div

回答

相關問題