JaapBigInThail
New Member
Hi i try to draw something like this :photousing divs and css, i need to hover each area separately.so far I've done something like this but it does not work well because it activates blocks and only two of it ;/css : \[code\] <style type="text/css"> .arrow-up { position : absolute; top : 150px; width: 150px; height: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-bottom: 60px solid black; } .arrow-up:hover{ border-bottom: 60px solid red;} .arrow-down { position : absolute; top : 90px; width: 150px; height: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-top: 60px solid blueviolet; } .arrow-down:hover{ border-top: 60px solid red; } .arrow-right { position : absolute; top : 90px; width: 0; height: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 60px solid green; } .arrow-right:hover{ border-left: 60px solid red; } .arrow-left { position : absolute; top : 90px; left : 217px; width: 0; height: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-right:60px solid blue; } .arrow-left:hover{ border-right: 60px solid red; }</style><html> <body> <div class="arrow-down"></div> <div class="arrow-up"></div> <div class="arrow-left"></div> <div class="arrow-right"></div> </body></html>\[/code\]any idea ?is it possible ?demo