Въпрос за CSS

8 отговора 344 прегледа
#1

Въпрос за CSS

Привет,

имам SPAN,нещо такова

<SPAN class='xxx'><a href='blah.htm>Click here</a> to read more</SPAN>

Мога ли да направя така, че при onmouseover целия текст (на линка + другия текст) вътре в СПАН-а да си сменя цвета, без да пиша нищо повече вътре в СПАН таг-а ? Т.е всичко да е дефинирано в класа ххх.

10х

Отговор
в отговор на Microsoft #2

Re: Въпрос за CSS

В този случай не ти трябва class на SPAN-a, а class на А-то:

<a href='blah.htm class="xxx">Click here</a> to read more

а смяната на цветовете при onmouseover най-лесно става така
в CSS-a:

.xxx
{............... color: #000000; text-decoration: none...........}
.xxx:hover
{............... color: #770000; text-decoration: none...........}


.

The Armenian Priest wishes You a lot of good health...
Отговор
в отговор на Byd™ #3

Re: Въпрос за CSS

Малка поправка, А-то няма да хване другия текст.

По скоро комбинация с нещо от сорта:

<span onmouseover="this.style.color='#000000'" onmouseout="this.style.color='#FFFFFF'"><a href="blah.htm" class="xxx">Click here</a> to read more</span>

Споко. Хубавите работи, бавно стават.
Отговор
в отговор на JetSpeeD #4

Re: Въпрос за CSS

така сигурно ще стане обаче аз не искам да има никакви онмаусовер в СПАН-а
Т.е СПАН-а да изглежда така както съм го написал и всичко да се дефинира извън него.

Отговор
в отговор на Microsoft #5

Re: Въпрос за CSS

под мозила си безпроблемен... там всеки елемент може да има псевдо клас.

span.xxx:hover
{
...
}

обаче под великолепния полу поддържащ цсс2 ИЕ разбира се това няма да тръгне толкоз лесно.
Eдинствения тарикатлък дето можеш да направиш (за момента) е с

behavior: url('myCustomBehavior.hta')

за .hta можеш да прочетеш повече в msdn. Ако това не ти се прави можеш да се разровиш да видиш структурата на такъв файл
(едно време беше нашумял за да се правят мигащи линкове, където има такива можеш да намериш такъв .hta)

и така... ама много играчка. и освен това последно май се оказа че ако имаш 50 спана за всеки спан ще прави заявка към сървъра за това .hta. иначе ще ти реши проблема.

Отговор
в отговор на Microsoft #6

Re: Въпрос за CSS

Може и

.ххх {
...neshto si
}

A {
... neshto
}

Но по този начин дефинираното за A, ще се отразио на всички, останали <А ...> тагове, ако има такива, и ще трябва да има задаваш inline стилове, или други класове, ако искаш да изглеждат различно от този.

Най-същественото е невидимо за очите
Отговор
в отговор на Microsoft #7

Re: Въпрос за CSS

Sorry, в бързината не бях допрочел че искаш целия текст да си сменя цвета....

Незнам защо имаш нещо против onmouseover-a в SPAN-a, явно си имаш причина. Въпроса е дали имаш нещо против самия onmouseover event на SPAN-a или просто да не го пише там.

значи ако разбирам правилно това: "СПАН-а да изглежда така както съм го написал и всичко да се дефинира извън него"
ти трябва нещо такова:



<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
.xxx
{color: #000000; text-decoration: none}
.xxx1
{color: #880000; text-decoration: none}
</style>
<script language="JavaScript">
<!--
function init(){
var AllSpanCollect=document.getElementsByTagName("span");
for (z=0;z<=(AllSpanCollect.length-1);z++) {
if(AllSpanCollect[z].className.toString()=="xxx"){
AllSpanCollect[z].onmouseover=ActColor;
AllSpanCollect[z].onmouseout=InactColor;
}
}
}

function ActColor(e) {
if(!e){var e=window.event;}
var EventStarter;
if(e.target){
EventStarter=e.target.parentNode;
if(EventStarter.tagName.toString().toLowerCase()!="span"){EventStarter=EventStarter.parentNode;}
var ACollect=EventStarter.childNodes;
for (z=0;z<=(ACollect.length-1);z++){ACollect[z].className="xxx1";}
}
else if(e.srcElement){
EventStarter=e.srcElement;
if(EventStarter.tagName.toString().toLowerCase()!="span"){EventStarter=EventStarter.parentNode;}
var ACollect=EventStarter.children;
for (z=0;z<=(ACollect.length-1);z++){ACollect[z].className="xxx1";}
}

EventStarter.className="xxx1";
}

function InactColor(e) {
if(!e){var e=window.event;}
var EventStarter;
if(e.target){
EventStarter=e.target.parentNode;
if(EventStarter.tagName.toString().toLowerCase()!="span"){EventStarter=EventStarter.parentNode;}
var ACollect=EventStarter.childNodes;
for (z=0;z<=(ACollect.length-1);z++){ACollect[z].className="xxx";}
}
else if(e.srcElement){
EventStarter=e.srcElement;
if(EventStarter.tagName.toString().toLowerCase()!="span"){EventStarter=EventStarter.parentNode;}
var ACollect=EventStarter.children;
for (z=0;z<=(ACollect.length-1);z++){ACollect[z].className="xxx";}
}

EventStarter.className="xxx";
}
//-->
</script>
</HEAD>

<BODY onload="init()">

<SPAN class="xxx"><a href="blah.htm" class="xxx">Click here</a> to read more</SPAN>

</BODY>
</HTML>

(тествано с IE6 / NS7)

това се задейства при onmouseover на целия SPAN...

... а това следващото при onmouseover на A-то (защото така и не си изясних кое точно ти трябва)


<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
.xxx
{color: #000000; text-decoration: none}
.xxx1
{color: #880000; text-decoration: none}
</style>
<script language="JavaScript">
<!--
function init(){
var AllACollect=document.getElementsByTagName("a");
for (z=0;z<=(AllACollect.length-1);z++) {
if(AllACollect[z].className.toString()=="xxx"){
AllACollect[z].onmouseover=ActColor;
AllACollect[z].onmouseout=InactColor;
}
}
}

function ActColor(e) {
if(!e){var e=window.event;}
var EventStarter;
if(e.target){EventStarter=e.target.parentNode;}
else if(e.srcElement){EventStarter=e.srcElement;}
EventStarter.className="xxx1";
EventStarter.parentNode.className="xxx1";
}

function InactColor(e) {
if(!e){var e=window.event;}
var EventStarter;
if(e.target){EventStarter=e.target.parentNode;}
else if(e.srcElement){EventStarter=e.srcElement;}
EventStarter.className="xxx";
EventStarter.parentNode.className="xxx";
}

//-->
</script>
</HEAD>

<BODY onload="init()">

<SPAN class="xxx"><a href="blah.htm" class="xxx">Click here</a> to read more</SPAN>

</BODY>
</HTML>

(тествано с IE6 / NS7)

.

The Armenian Priest wishes You a lot of good health...
Отговор
в отговор на Byd™ #8

Re: Въпрос за CSS

thnx Byd!
tva mi trqbvashe
----------
Незнам защо имаш нещо против onmouseover-a в SPAN-a, явно си имаш причина. Въпроса е дали имаш нещо против самия onmouseover event на SPAN-a или просто да не го пише там.
----------
просто да не го пише там, nishto drugo. Tva e ot gledna tocka na search engine optimization. Opita ili po-skoro intuiciqta mi pokazva 4e Google ne obi4a <a..></a> tags bloated s onmouseover i podobni raboti. Opitvam se da su4etaq user-frienly i Google-friendly(s malko izmami) design.

Mnogo ti blagodarq !

Отговор
в отговор на Microsoft #9

Re: Въпрос за CSS

Ако не е тайна, какъв е дълбокият смисъл някакъв текст да си сменя цвета onmouseover при положение, че onclick няма да се случва нищо, т.е. не целият текст ще е линк?

Питам щото чух да се споменава user-friendliness, а ми се струва, че с подобни ефекти потребителите повече биха се объркали и в последствие раздразнили.

DO LESS. LIVE LONGER.
Отговор