Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Wesley Kovalski

Efeito hover em link

Por , em Desenvolvimento frontend

Recommended Posts

Wesley Kovalski    0

Wesley Kovalski
Postado

Boa tarde a todos!

 

Eu queria saber como que faz um efeito hover em um link ( menu ) com um background no fundo.

 

Por exemplo:

 

HTML:

 

<ul>
    <li><a href="#"> item </a></li>
    <li><a href="#"> item </a></li>
</ul>

 

 

E no css colocar um background no:

 

ul li a:hover{
background:red;
}

Mas essa cor vermelha de fundo tem que ser arredondado!

 

Já usei aqueles border radius...funciona no chrome, mozila e ai vai...mas na bost...do Internet Explorer 8 não funciona!!!

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

exatamente, não funciona borda redonda no ie.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ner0    6

Ner0
Postado

Isso resolve o seu problema?

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{padding:0;margin:0 auto;}
body, html{}
ul{}
li{}
li a{color:black;padding:5px;}
li a:hover{background:red;color:black;padding:5px;border-radius:5px;}
</style>
</head>


<body>
<ul>
<li><a href="">Opção 1</a></li>
</ul>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Qual o tamanho do border-radius? Se for até 3px, pode fazê-lo usando alguns pequenos "falsetes" com :after e :before na LI e no A.

Já se for maior que isso, será necessário a utilização de algum plugin adicional (CSS - htc - ou JS). O que, particularmente, não recomendo. É realmente necessário o funcionamento da borda redonda neste navegador?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alexandre Broggio    9

Alexandre Broggio
Postado

Wesley,

 

Use o Jquery corner http://www.malsup.com/jquery/corner/ ou um arquivo .htc que você encontra neste link http://code.google.com/p/curved-corner/downloads/list

 

E pode usar ele assim

 

.box-radius {
	border-radius: 15px;
	behavior: url(border-radius.htc);
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wesley Kovalski    0

Wesley Kovalski
Postado

Então ainda não deu certo, tipo se for usar sem hover ele funciona...esse jquery corner e os outros ae....mas nos hover ai não funfa...

Mas o cliente quis mudar o layout hehe, ai não vai mais precisar....

 

Mas muito obrigado a todos!!! Valeu mesmo!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito