Zeige andere Div auf Hover-Liste Element

Ich habe ein Problem mit Hover auf Listenelement.Zeige andere Div auf Hover-Liste Element

Ich möchte ein anderes Div anzeigen, wenn ich ein "li" -Element schweben.

Hier ist es Link zu meinem HTML-Code:

<ul id="color_to_pick_list" class="clearfix"> 
<li id="hover_2" class="selected hover_2"> <a href="http://technicolor.pl/shop_v2/aixam-city/32-aixam-city-hatchback-2003-2010.html" id="color_2" name="Przejrzystość folii 5%" class="color_pick selected" title="Przejrzystość folii 5%"> <img src="http://technicolor.pl/shop_v2/img/co/2.jpg" alt="Przejrzystość folii 5%" title="Przejrzystość folii 5%" width="20" height="20" > </a></li> 
<li id="hover_5"> <a href="http://technicolor.pl/shop_v2/aixam-city/32-aixam-city-hatchback-2003-2010.html" id="color_5" name="Przejrzystość folii 20%" class="color_pick" title="Przejrzystość folii 20%"> <img src="http://technicolor.pl/shop_v2/img/co/5.jpg" alt="Przejrzystość folii 20%" title="Przejrzystość folii 20%" width="20" height="20"> </a></li><li id="hover_6"> <a href="http://technicolor.pl/shop_v2/aixam-city/32-aixam-city-hatchback-2003-2010.html" id="color_6" name="Przejrzystość folii 35%" class="color_pick" title="Przejrzystość folii 35%"> <img src="http://technicolor.pl/shop_v2/img/co/6.jpg" alt="Przejrzystość folii 35%" title="Przejrzystość folii 35%" width="20" height="20"> </a></li></ul> 



    <div id="color_2_tooltip"><p id="tooltip_color_2"><img src="http://technicolor.pl/shop_v2/img/cms/5.jpg" width="240" /></p></div> 
    <div id="color_5_tooltip"><p id="tooltip_color_5"><img src="http://technicolor.pl/shop_v2/img/cms/20.jpg" width="240" /></p></div> 
    <div id="color_6_tooltip"><p id="tooltip_color_6"><img src="http://technicolor.pl/shop_v2/img/cms/35.jpg" width="240" /></p></div>

Hier it `s Code CSS:

#color_2, 
    #color_5, 
    #color_6{ 
     display:block; 
    } 
    ul li.hover_2:hover~#color_2_tooltip, 
    #color_5:hover~#color_5_tooltip, 
    #color_6:hover~#color_6_tooltip { 
     display:block; 
    } 
ul li.hover_2:hover~#color_2_tooltip #tooltip_color_2, 
    #color_5:hover~#color_5_tooltip #tooltip_color_5, 
    #color_6:hover~#color_6_tooltip #tooltip_color_6{ 
    position:absolute; 
    bottom:0; 
    top:0; 
    left:140px; 
    right:0;  
    } 


    #color_2_tooltip, 
    #color_5_tooltip, 
    #color_6_tooltip { 
     display:none; 
    }

Quelle

2016-08-02 Igor

Sie können nicht mit CSS da Ihr Ziel kein Geschwister oder Nachkomme ist. Sie müssten JavaScript verwenden. – j08691

Nicht möglich mit der aktuellen HTML-Struktur. Du brauchst JS. –

etwas Versuchen wie folgt aus:

@{ 
    Layout = null; 
} 

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>QQIndex</title> 
    <script src="~/Scripts/jquery-1.9.1.min.js"></script> 
    <style> 
     #color_2, 
     #color_5, 
     #color_6 { 
      display: block; 
     } 

     #color_2_tooltip, 
     #color_5_tooltip, 
     #color_6_tooltip { 
      display: none; 
     } 
    </style> 
    <script type="text/javascript"> 
     $(function() { 
      $(".hover") 
      .mouseover(function() { 
       $(":first", this).show(); 
      }) 
      .mouseout(function() { 
       $(":first", this).hide(); 
      }); 
     }) 
    </script> 
</head> 
<body> 
    <ul id="color_to_pick_list" class="clearfix"> 
     <li id="hover_2" class="selected hover_2 hover"> 
      <div id="color_2_tooltip"> 
       <p id="tooltip_color_2"> 
        <img src="~/Images/orderedList3.png" width="240" /> 
       </p> 
      </div> 
      <a href="http://www.microsoft.com" id="color_2" name="Przejrzystość folii 5%" class="color_pick selected" 
       title="Przejrzystość folii 5%"> 
       <img src="~/Images/orderedList0.png" alt="Przejrzystość folii 5%" title="Przejrzystość folii 5%" 
        width="120" height="120"> 
      </a> 
     </li> 
     <li id="hover_5" class="hover"> 
      <div id="color_5_tooltip"> 
       <p id="tooltip_color_5"> 
        <img src="~/Images/orderedList4.png" width="240" /> 
       </p> 
      </div> 
      <a href="http://www.microsoft.com" id="color_5" name="Przejrzystość folii 20%" class="color_pick" 
       title="Przejrzystość folii 20%"> 
       <img src="~/Images/orderedList1.png" alt="Przejrzystość folii 20%" title="Przejrzystość folii 20%" 
        width="120" height="120"> 
      </a> 
     </li> 
     <li id="hover_6" class="hover"> 
      <div id="color_6_tooltip"> 
       <p id="tooltip_color_6"> 
        <img src="~/Images/orderedList5.png" width="240" /> 
       </p> 
      </div> 
      <a href="http://www.microsoft.com" id="color_6" name="Przejrzystość folii 35%" class="color_pick" 
       title="Przejrzystość folii 35%"> 
       <img src="~/Images/orderedList2.png" alt="Przejrzystość folii 35%" title="Przejrzystość folii 35%" 
        width="120" height="120"> 
      </a> 
     </li> 
    </ul> 
</body> 
</html>

Quelle

2016-08-02 18:25:39 kblau

Zeige andere Div auf Hover-Liste Element

Antwort

Verwandte Themen