Si, te comprendo, pero esto no se puede hacer solamente con CSS tendras que usar javascript y CSS para poder tener este efecto.
Con lo que te especifique anteriormente tendras que hacer una funcion que al estar onmouseover sobre la celda ejecute la función javascript que cambie el estilo de la celda al current y que al salir de la celda no regrese al anterior hasta que entre a la nueva celda.
Algo asi (este ejemplo es básico y supone que tienes solo 5 noticias desplegadas a la vez con 5 diferentes id's):
Código css:
Ver original<style>
/* Usaremos clases en lugar de id's */
.td_current { background:url(miotraimagendefondo.png); }
.td_normal { background:url(miimagendefondo.png); }
</style>
Código javascript
:
Ver original<script>
// Esta función permite encontrar los elementos dentro de la pagina que tengan una clase determinada
var getElementsByClassName = function (className, tag, elm){
if (document.getElementsByClassName) {
getElementsByClassName = function (className, tag, elm) {
elm = elm || document;
var elements = elm.getElementsByClassName(className),
nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
returnElements = [],
current;
for(var i=0, il=elements.length; i<il; i+=1){
current = elements[i];
if(!nodeName || nodeName.test(current.nodeName)) {
returnElements.push(current);
}
}
return returnElements;
};
}
else if (document.evaluate) {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = "",
xhtmlNamespace = "http://www.w3.org/1999/xhtml",
namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
returnElements = [],
elements,
node;
for(var j=0, jl=classes.length; j<jl; j+=1){
classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
}
try {
elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
}
catch (e) {
elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
}
while ((node = elements.iterateNext())) {
returnElements.push(node);
}
return returnElements;
};
}
else {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = [],
elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
current,
returnElements = [],
match;
for(var k=0, kl=classes.length; k<kl; k+=1){
classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
}
for(var l=0, ll=elements.length; l<ll; l+=1){
current = elements[l];
match = false;
for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
match = classesToCheck[m].test(current.className);
if (!match) {
break;
}
}
if (match) {
returnElements.push(current);
}
}
return returnElements;
};
}
return getElementsByClassName(className, tag, elm);
};
// Esta función es la que cambiará la clase de la celda en la que esta parada
function cellChange(idActual){
// encuentra todos los elementos que tienen td_current como clase y los cambia a td_normal
var normal = getElementsByClassName('td_current');
var contador = 0;
while (normal[contador])
{
normal[contador].style.class = 'td_normal';
contador++;
}
// al td el id actual le cambia la clase a td_current para que este rojo
document.getElementById(idActual).style.class = 'td_current';
}
</script>
La primera td_current es solo para que al cargar tu pagina esta inicie con la primera noticia como seleccionada.
Código html:
Ver original<tr id='noticia1' class="td_current" onMouseOver="cellChange('noticia1');"> <tr id='noticia2' class="td_normal" onMouseOver="cellChange('noticia2');">>
<tr id='noticia3' class="td_normal" onMouseOver="cellChange('noticia3');">>
<tr id='noticia4' class="td_normal" onMouseOver="cellChange('noticia4');">>
<tr id='noticia5' class="td_normal" onMouseOver="cellChange('noticia5');">>
Esto esta un poco largo pero al final te dara el resultado que deseas.
PD: espero no haber cometido algun error en el codigo :S jejejejeje