Just nu i M3-nätverket
Jump to content

Problem med boxar i css och hover effekt


lyckebo

Recommended Posts

Hej

 

Jag har ett problem. Har skapat 3 likadana boxar med css, alltså utan bilder. Dessa boxar är med text och bild. Dessa boxar vill jag nu ha varsin hover effekt på, där själva hela boxen "hovrar" och ska länka till nästa steg på sidan

 

Hur gör jag enklast? Boxarna ligger bredvid varandra.

 

såhär se css koden ut för tillfället.

#box1 {
background: #cccccc;
float: left;
margin-right: 30px;
width: 200px;
height: 410px;
list-style: none;

}

.roundtop {background: #ffffff;}
.roundbottom {background: #ffffff;}
.r1{margin: 0 5px; height: 1px; overflow: hidden; background: #cccccc;}
.r2{margin: 0 3px; height: 1px; overflow: hidden; background: #cccccc;}
.r3{margin: 0 2px; height: 1px; overflow: hidden; background: #cccccc;}
.r4{margin: 0 1px; height: 2px; overflow: hidden; background: #cccccc;} 

Link to comment
Share on other sites

nu ser jag inte hur din markup (html) ser ut men du kan lägga en länk inne i boxarna som du sätter till display:block och sätter 100% height på.

lägg in en länktext som du förskjuter med text-indent:-9999px

Link to comment
Share on other sites

Min html kod ser ut såhär.

<div id="box1">

<div class="roundtop">
	<div class="r1"></div>
	<div class="r2"></div>	
	<div class="r3"></div>		
	<div class="r4"></div>	
</div>	

<div class="h2"><h2>Vad vi gör</h2></div>
<div class="p"><p>No fabulas saperet complectitur vix, <br />ius viderer hendrerit voluptaria in, mea <br />ei amet cibo indoctum.</p></div>
<img src="images/apple.jpg" alt="apple" border="0" /> 


<div class="roundbottom">
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
</div> 

Link to comment
Share on other sites

<div id="box1" class="box">
<a href="länk" class="boxlink">Vad vi gör</a>
<div class="roundtop">
	<div class="r1"></div>
	<div class="r2"></div>	
	<div class="r3"></div>		
	<div class="r4"></div>	
</div>	

<div class="h2"><h2>Vad vi gör</h2></div>
<div class="p"><p>No fabulas saperet complectitur vix, <br />ius viderer hendrerit voluptaria in, mea <br />ei amet cibo indoctum.</p></div>
<img src="images/apple.jpg" alt="apple" border="0" /> 


<div class="roundbottom">
	<div class="r4"></div>
	<div class="r3"></div>
	<div class="r2"></div>
	<div class="r1"></div>
</div>
</div> 

 

.box a.boxlink {display:block; z-index:2;position:absolute;top:0;left:0;right:0;bottom:0;text-indent:-9999px}
.box a.boxlink:hover {background:rgba(0,0,0,0.3);}

Link to comment
Share on other sites

kanske inte jättelyckat av mig att köra på rgba då det inte stöds av IE.

 

lägg till detta:

.box {position:relative}

 

strunta i background på a:hover

 

om placeringen på länken inte stämmer får du sätta en höjd på länkarna i css

Link to comment
Share on other sites

Lite OT:

För att åstadkomma rundade hörn så räcker det med CSS och ingen extra markup:

.box { 
border-radius:12px; 
-moz-border-radius:12px;
-webkit-border-radius:12px;
-khtml-border-radius:12px;
}

Ja, förutom i IE då såklart...

Men där kan du lägga till en sk. behavior-fil för att få till det border-radius.htc.zip

 

Då blir koden alltså:

.box { 
border-radius:12px;
-moz-border-radius:12px;
-webkit-border-radius:12px;
-khtml-border-radius:12px;
behavior: url(border-radius.htc);
}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...