Ajuda com CSS

[Christian G.]

Pessoal,

To precisando de uma ajuda, na verdade quero saber de alguém que entenda bastante de CSS se é possível fazer o que eu quero.

Estou fazendo um site, e no rodapé vai ter um "Acesso Rápido" para os menus, onde vai ter os mesmo menus existentes lá em cima do site.

O que eu queria era que ao passar o mouse sobre um item de menu, uma imagem que está a esquerda aumentasse de tamanho. A imagem e o menu estão na mesma div.

Já dei uma pesquisada e não consegui achar nada a respeito já que a propriedade :hover age somente no objeto selecionado.

Caso tenha ficado dificil de entender, vou citar um exemplo com o próprio fórum.

Imaginemos que ao passar o mouse sobre os botões "MacMagazine", "Membros" ou "Fórum", o logotipo da Macmagazine que está em cima desses menus aumentasse de tamanho.

Espero que tenha ficado claro. Fico no aguardo.

[Deblyn Prado]

Você consegue aumentar a imagem usando scale (propriedade da CSS3), mas nesse caso como o elemento que você vai alterar não é o elemento onde está o mouse sugiro que use um Js básico aí.

Cria uma classe com o efeito scale que você quer.

Crie também um js que capture o hover e adicione a classe criada em um elemento img

Aqui tem um exemplo do scale http://tableless.com...css-transforms/ o js é mais ou menos isso:

$(function(){
$("#menu").hover(
function(){$(img).addClass("img-scale"),
function(){$(img).removeClass("img-scale") }
);
});

OBS: não testei o JS

Edited October 1, 2012 by Deblyn Prado

[Christian G.]

Você consegue aumentar a imagem usando scale (propriedade da CSS3), mas nesse caso como o elemento que você vai alterar não é o elemento onde está o mouse sugiro que use um Js básico aí.

Cria uma classe com o efeito scale que você quer.

Crie também um js que capture o hover e adicione a classe criada em um elemento img

Aqui tem um exemplo do scale http://tableless.com...css-transforms/ o js é mais ou menos isso:

$(function(){
$("#menu").hover(
function(){$(img).addClass("img-scale"),
function(){$(img).removeClass("img-scale") }
);
});

OBS: não testei o JS

Valeu pela ajuda, dei uma lida na propriedade scale já, mas não consegui fazer o que queria via JS. Não manjo muito de JS infelizmente...