Umieść jeden element na podstawie położenia innego elementu, używając tylko CSS

W prosty sposób wyświetliłem tekst pomocy, który wygląda jak okno wyskakujące przy użyciu tylko CSS. Działa dobrze, ale domyślnie okno wyskakujące jest wyrównywane do lewej. Chciałbym, żeby okno było bliżej samej ikony, jak na przykład (w moim przykładzie) "left: 360px;" pokażę. Ponieważ pozycja ikony kursora może się zmienić, czy ktoś wie o sposobie ustawienia pozycji okna wyskakującego w oparciu o pozycję ikony zawieszonej nad ikoną? Używamy jQuery i Prototype, ale wolę używać tylko CSS, aby można było użyć tego samego kodu na każdym typie strony. Dzięki.Umieść jeden element na podstawie położenia innego elementu, używając tylko CSS

Oto mój przykład:

EDIT: To zostało już odpowiedział, ale tutaj jest ustalony kod w przypadku ktokolwiek inny szuka łatwy sposób wyświetlić komunikat wyskakujące po najechaniu na ikonę. Ponadto, jest to przykład na jsfiddle.net, więc możesz go łatwo wypróbować: http://jsfiddle.net/zDADW/

Przy okazji, jeśli ktoś wie, dlaczego ktoś miałby tę pozycję obniżyć (od tego pisania ktoś kliknął strzałkę w dół dla tego pytanie), proszę dać mi znać.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
     <title>Show help text when hovering using CSS</title> 
      <style type="text/css"> 
       #help:hover #help_popup { 
        /*If you hover over the help icon, show the help_popup span*/ 
        display: block; 
       } 

       #help { 
        /*This is the part I was missing*/ 
        position: relative; 
       } 

       #help_popup { 
        /*Normally, hide this span*/ 
        display: none; 
        position: absolute; 
        width: 15em; 
        padding: 10px; 
        background: #CFF; 
        color: #000; 
        border: 3px solid; 
        text-align: center; 
        left: 10px;  /*this is still needed even if it's 0*/ 
       } 
      </style> 
    </head> 
    <body> 
     <div> 
      This shows a popup window using CSS when you mouse over an image. 
      <div> 
       Hover over the question mark for a popup help window. 
       <span id="help"> 
        <img src="questionmark.png" alt="[?]"/> 
        <span id="help_popup"> 
          This is the normally hidden help text. 
         <br/>It only shows up when you hover over the question mark. 
        </span> 
       </span> 
      </div> 
     </div> 
    </body> 
</html>

Źródło

2013-03-27 rrtx2000

Dodaj #help { position: relative; } do swojego CSS. Umożliwi to elementowi pozycjonowanemu bezwzględnie obliczyć jego położenie względem elementu #help. Prawdopodobnie po wprowadzeniu tej zmiany prawdopodobnie chcesz zmniejszyć właściwość left.

jsFiddle demo

Źródło

2013-03-27 14:59:52 thirdender

Dzięki! Działa jak mistrz! – rrtx2000

Chciałbym zagłosować, ale nie mam reputacji. – rrtx2000

Dzięki :-) Wszystko dobrze. – thirdender

Umieść jeden element na podstawie położenia innego elementu, używając tylko CSS

Odpowiedz

Powiązane problemy