It looks like you're new here. If you want to get involved, click one of these buttons!
postrender.bouger = function(content) { var character = content.querySelectorAll("char"); for (var lettre in character) { if (character.hasOwnProperty(lettre)) { character[lettre].onmouseover = function(a){ changeStyle(this); }; character[lettre].onmouseleave = function(a){ var elem = this; setTimeout(function(){ changeStyle(elem); },1000); }; } } function changeStyle(elem) { elem.style.textShadow = (elem.style.textShadow == "none") ? "5px 5px 1px #333333" : "none"; elem.style.color = (elem.style.color == "red") ? "black" : "red"; } console.log("hello"); }
Comments
The most serious issues:
As noted above, you'd probably be better served by using CSS transitions instead, for example: You might need to swap the initial color and/or text-shadow with the hover versions. I'm unsure exactly what styles you were going for, but that should give you the general idea of how to do it without a script.
However, if you're married to scripting it, then this should be close to what you need: I modified the textShadow styling a bit to be what I thought you were looking to do. Again, however, I'm unsure if it's exactly what you were going for.
PS: Don't use both the CSS and the script. Choose one or the other.
I don't understand the difference between story formats, it's just the interface and the based css that is different isn't it ? That's why I think it was not important in that case.
What I want to do is to have a blurred text (I use text-shadow for that) that become clear when hovering it. Actually I used a script because I wanted the :hover properties to stay few seconds after stopped hovering the letter, and I didn't know the css "step-end" value which does that very well, so thank you.
Also, of course I was to fast and I didn't put enough details, sorry for that, but the thing is that the script I put works very well in a "normal" html page, so my question was more about why some scripts don't work with Twine ? I made a mistake on querySelectorAll(".char"), but I have fixed it still doesn't work and I still don't understand what's the problem.
Anyway, now it doesn't matter because of course the css solution is far better.
Thanks for your answer and the precious time you spent on it !
Mathilde
Edit : I don't see how to mark the question as answered ?
I outlined the major issues with the script in my last reply (and supplied a fixed version).
Beyond that, story formats are JavaScript applications, not static web pages. You cannot expect code which works on a static page to necessarily work in an application. In particular to story formats:
If you used Ask a Question, then there should be a button/link for that. If you used New Discussion, then there won't be.