CSS3目标选择器问题

Question

I am teaching myself JS/HTML5/CSS3 by studying, combining and modifying 3 code examples by 3 different authors. My working Pen (which include references to the original authors) can be found here

http://codepen.io/Widgeteria/pen/jqpyYb

My question is how do I make the time element invisible in the narrow blue vertical Task Clock partition or section (after starting the stop watch by clicking on the start button) when you click to either the Dropzone or Notes partitions.

I am tried various ways (including embedded CSS rules) but cannot make the faint clock numerals disappear from the vertical section box after I click on another section.

Here is how the clock is set up:

<h1><time>00:00:00</time></h1>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="clear">clear</button>

I am trying to make the <time> tag invisible, when the target: shifts to a section other than Task Clock, and visible again when I click back.

The second problem I am having is trying to modify the JS so that the clock does not keep running if I click on the Start button twice.

Any ideas on how to solve either problem would be much appreciated.

Answer 1

For the CSS part, you should change this

:target time {
  visibility: hidden;
}

and this

,time {
  visibility: visible;
}

to this:

:target #time {
  visibility: hidden;
}

and this

#time {
  visibility: visible;
}

Also, add an id="time" on the <h1> tag containing the <time> tag.
The problem was the :target thing. It works only with ids , not with tags per-se.

For the Javascript part, you could modifiy the timer function to:

function timer() {
 if(t)
   clearTimeout(t);
 t = setTimeout(add, 1000);
}

This clears the timeout if it already runs, so you won't lose refferences to already initiated timeouts and you also won't have parallel timeouts running.

Have a good one.