Legend Effect with Inherited Text

0

Next, using CSS3 3 HTML5. I want to make the feature that produces the following effect: I have elements on the screen, when overlapping the arrow on it (hover event) should appear (at the top) text scrolling from the left-> right in a region delimited by specified text color rectangle, background color, and font size. Any child element must pass the text to the parent function.

Imagine an example, a calendar at the point of the day, it is highlighted and scrolls the text (at the top of the screen) relative to the events of the day. Scroll down code only

.marquee {
    width: 500px;
    height: 50px;
    margin: 25px auto;
    overflow: hidden;
    position: relative;
    border: 1px solid #000;
    margin: 25px auto;  
    background-color: #222;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);
    box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);
}

The page will not be rolled and fixed as a slide. Yes you can have JS if necessary

I thought it would be shorter than JS as a complement ... the code can be functional. But I'll really need it to be in CSS3 otherwise it goes out of the way to use CSS3 and HTML5

    
asked by anonymous 05.06.2015 / 01:29

1 answer

0

If you want a marquee ... why do not you use a <marquee> ? It still works in all modern browsers, and you just need to do something like

var calendario = …;
var marquee = document.querySelector('marquee');  // ou algo parecido pra achar o elemento

calendario.addEventListener('mouseover', function () {
    marquee.textContent = 'blablabla';  // IE 9+

    // ou para IE 8+:
    while (marquee.firstChild !== null) { marquee.removeChild(marquee.firstChild); }
    marquee.appendChild(document.createTextNode('blablabla'));
}, false);

(Of course you would have to do this for every cell in the calendar, and pull 'blablabla' from somewhere)

    
05.06.2015 / 02:51