Autor Zpráva
MilanJ
Profil
#1 · Zasláno: 5. 6. 2006, 10:27:08
Odpovědět Citovat
Mám problém...chtěl bych, aby se po najetí na červenou obdélníkovou oblast tvořenou DIV s nějakým obsahem. Chtěl bych, aby se po najetí myši nad tuto obdélníkovou oblast změnila barva jejího pozadí.
Lze to provádět pomocí CSS? Jak?
tiso
Profil
#2 · Zasláno: 5. 6. 2006, 11:04:28
Odpovědět Citovat 

<div class="red">...</div>



CSS:

.red{background: Red none;}

.red:hover{background: Green none;}

- nefunguje v IE, lebo ten vie hover iba pri odkazoch...
MilanJ
Profil
#3 · Zasláno: 5. 6. 2006, 11:06:41
Odpovědět Citovat
Tak to je problém...
Jde to nějak obejít, udělat to prostě jinak...potřebuji, aby se po najetí myši změnila barva pozadí obdélníkové oblasti.
aitoo
Profil
#4 · Zasláno: 5. 6. 2006, 11:10:24
Odpovědět Citovat
Ahoj,

možná ti bude postačovat takového řešení. Jelikož IE nepodporuje :hover pro jiné elementy než a, tak je celý obsah uzavřen do odkazu s prázdným atributem href. 


<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs">

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta http-equiv="Content-Language" content="cs" />

  <meta http-equiv="imagetoolbar" content="no" /> 

  <meta name="autosize" content="off" />

  <title>Příklady | aitoo</title>  

  <style type="text/css" media="screen, projection">

* {margin: 0; padding: 0;}

body {

	font-family: Arial, Helvetica, sans-serif;

	font-size: small;

	background: white; color: #353535;

	text-align: center;

}

html>body {

	font-size: medium;

}

div.obal {

	width: 500px;

	text-align: justify;

	margin: 5em auto;

}

div.obal a {

	text-decoration: none;

	display: block;

	background: #5A5A5A; color: white;

	padding: 10px;

}

div.obal a:visited {

	color: white;

}

div.obal a:hover {

	color: #BCE140; background: #4169E1;

	cursor: default;

}

div.obal a:hover span {

	cursor: text;

}

  </style>

</head>

<body>

<div class="obal">

<a href="">

<span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam suscipit felis at arcu. Suspendisse

 felis. Duis et felis ut urna dignissim malesuada. Vivamus pretium sem id elit pretium posuere. Duis

 sodales, metus ut lacinia laoreet, mi enim porta turpis, pharetra adipiscing nunc risus in nibh. In 

hac habitasse platea dictumst. Nulla vel massa nec nisi scelerisque aliquam. Donec ac purus. Morbi

 facilisis ullamcorper velit. Etiam leo.

</span>

</a></div> 

</body>

</html>
MilanJ
Profil
#5 · Zasláno: 5. 6. 2006, 11:16:53
Odpovědět Citovat
Už se blížíme zdárně k cíli, i když to pořád není ono.:-)
Já potřebuji, aby se barva změnila už po najetí nad obdélníkovou oblast. V Tvém příkladu aitoo se barva změní až po najetí na odkaz. :-/

Opravdu není jiné cesty? Nerad bych vytvářel obrázek. :-/
mata
Profil
#6 · Zasláno: 5. 6. 2006, 11:40:57
Odpovědět Citovat
<div class="obal" onmouseover="this.style.background='#ffcccc';" onmouseout="this.style.background='#ffffff';">

případně udělat funkci, která bude přidávat a odebírat classu, aby se nemusel měnit onmouseover a onmouseout u všech divů, kdyby sis vzpomněl, že chceš třeba jinou barvu
Radek Hrabůvka
Profil
#7 · Zasláno: 5. 6. 2006, 11:43:21
Odpovědět Citovat
MilanJ Pro IE se to dělá pomocí JS. V příkladu to mám pomocí JS i CSS, protože někteří uživatelé JS vypínají.
<style>
.over {width: 300px; height: 300px; background-color: gray;}
.over:hover {background-color: silver;}
</style>

<div class="over" onmouseover="style.backgroundColor = 'silver';" onmouseout="style.backgroundColor = 'gray';">
Bla bla text. Dám Paroubkovu ruku do ohně na to, že je to muž s&nbsp;diplomatickým vystupováním!
</div>
MilanJ
Profil
#8 · Zasláno: 5. 6. 2006, 11:47:27
Odpovědět Citovat
Jo jo, moc díky.;-)
Paroubkovu ruku bych dal za to taky...i obě.
aitoo
Profil
#9 · Zasláno: 5. 6. 2006, 12:25:25
Odpovědět Citovat
Tady opravená varianta pouze za použití CSS. Stačilo u odkazu nastavit pevné rozměry jako u obalovacího DIVu.

http://www.sweb.cz/aitoo/div_hover.html

Testováno na:

Maxthon 1.5.2
Opera 9 TP2
IE 6
Firefox 1.5.0.3
Leo
Profil
#10 · Zasláno: 5. 6. 2006, 12:37:27
Odpovědět Citovat
Vzdycky, kdyz vidim jak nekdo s odpustenim przni HTML kvuli nastavbovym technologiim (tady CSS), tak se mi otevira kudla v kapse... Pokud IE zatim neumi hover tak proste pouziju JS, ne nejaky prazdny odkaz... Leo
aitoo
Profil
#11 · Zasláno: 5. 6. 2006, 12:42:07
Odpovědět Citovat
Leo

Ok.
Časová prodleva: 18 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0