diff --git a/3d.css b/3d.css
index 3529c47..9c9bcec 100644
--- a/3d.css
+++ b/3d.css
@@ -35,6 +35,27 @@ html, body { width: 100%; height: 100%; overflow: hidden; }
     background: blue;
  }
 
+ .css3d :hover { opacity: 0.7; }
+
+ .css3d #a { pointer-events: none; }
+ .css3d #a * { pointer-events: all; }
+ .css3d #a:target { pointer-events: all; }
+ .css3d #a:hover { pointer-events: all; width: 70%; }
+ .css3d #a2 { left: 70%; }
+ .css3d #detector {
+	z-index: 1000; position: absolute; top: 0; bottom: 0; height: 0; width: 100%; height: 100%;
+	background: transparent; border: 10px solid rgba(100,1,0,0.4);
+	pointer-events: painted;
+}
+.css3d #detector:hover {
+    left: -100%;
+    transition: none;
+}
+.css3d #detector {
+    left: 100%;
+    transition: left 60s step-end;
+}
+
 .css3d iframe { width: 50%; height: 50%; }
 
 .css3d div:focus-within {
diff --git a/index.html b/index.html
index 9b5f5f0..14c291a 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,7 @@
     <h2>Procedural Designer</h2>
     <p>Latest version of my <a href="https://jsmaniac.github.io/phc-thesis/phc-thesis/">Ph.D draft</a></p>
     <div class="css3d" style="display: none;">
+        <div id="detector"></div>
         <div tabindex="0" id="a">
             A
             <div tabindex="0" id="a1">
@@ -23,11 +24,12 @@
             </div>
         </div>
         <div tabindex="0" id="b">
-            B
+            B<a href="#a">goto a</a><a href="#b">goto b</a>
         </div>
     </div>
-    <div class="view3d" style="display:one">
-        <div class="scene">
+    <div class="view3d" style="display: one">
+        <div class="scene" id="main">
+            <a class="go" href="#main">→ Enter ←</a>
             <div class="rest"></div>
             <div tabindex="0" class="three-d room hover room-test">
                 <div class="three-d object test" id="hello">Hello world
diff --git a/target-within-shim.js b/target-within-shim.js
index 76f79b7..f6524d2 100644
--- a/target-within-shim.js
+++ b/target-within-shim.js
@@ -6,20 +6,26 @@ function toggle(element, className, enable) {
     element.className = newcls.join(' ');
 }
 
-function targetWithin(id, enable) {
+function reverseAncestorsAndSelf(id) {
+    ancestorsAndSelf = [];
     if (id) {
         for (var e = document.getElementById(id); e; e = e.parentElement) {
-            toggle(e, 'target-within', enable)
+            ancestorsAndSelf[ancestorsAndSelf.length] = e;
         }
     }
+    return ancestorsAndSelf.reverse();
 }
 
-var current_hash = window.location.hash.substr(1);
+var current_hash = '';
 
 function hashChange() {
-    targetWithin(current_hash, false);
+    var oldElements = reverseAncestorsAndSelf(current_hash);
     current_hash = window.location.hash.substr(1);
-    targetWithin(current_hash, true);
+    var newElements = reverseAncestorsAndSelf(current_hash);
+    var i = 0;
+    while (i < oldElements.length && i < newElements.length && oldElements[i] == newElements[i]) { i++; }
+    for (var j = i; j < oldElements.length; j++) { toggle(oldElements[j], 'target-within', false); }
+    for (var j = i; j < newElements.length; j++) { toggle(newElements[j], 'target-within', true); }
 }
 
 window.addEventListener('load', hashChange, false);
diff --git a/test.css b/test.css
index ba4e2f6..b2aaad0 100644
--- a/test.css
+++ b/test.css
@@ -135,15 +135,43 @@ html, body { height: 100%; }
       position: absolute; top: 0; bottom: 0; left:0; right: 0; display: flex; align-items: center; justify-content: center;
       transition: background 0.6s, translate 2s, left step-start 1s; transform-style: preserve-3d; }
 .go::before { position: absolute; content: ''; left: 0; right: 0; height: 1.5em; z-index: -1;
-              background: white; transition: background 0.2s; }
+              background: blueviolet; transition: background 0.2s; }
 .go:hover::before { background: rgba(255, 255, 255, 0.6); }
 .go:hover { background: rgba(255, 255, 255, 0.1); }
-:target-within > .go { background: rgba(255, 255, 255, 0.0); color: rgba(0, 0, 0, 0); left: 9999vmin; transition: background 0.6s, translate 2s, left step-end 1s; }
-.target-within > .go { background: rgba(255, 255, 255, 0.0); color: rgba(0, 0, 0, 0); left: 9999vmin; transition: background 0.6s, translate 2s, left step-end 1s; }
-:target-within > .go::before { background: rgba(255, 255, 255, 0.0); color: rgba(0, 0, 0, 0); left: 9999vmin; }
-.target-within > .go::before { background: rgba(255, 255, 255, 0.0); }
-:target-within > .go::after { --distance: calc(0 - var(--width)) !important; left: 9999vmin; transition: background 0.6s var(--ease-out-bounce), transform 1s var(--ease-out-bounce), left 1s step-end; }
-.target-within > .go::after { --distance: calc(0 - var(--width)) !important; left: 9999vmin; transition: background 0.6s var(--ease-out-bounce), transform 1s var(--ease-out-bounce), left 1s step-end; }
+:target-within > .go { background: rgba(255, 255, 255, 0); color: rgba(0, 0, 0, 0); left: 9999vmin; transition: background 0.6s, translate 2s, left step-end 1s; }
+.target-within > .go { background: rgba(255, 255, 255, 0); color: rgba(0, 0, 0, 0); left: 9999vmin; transition: background 0.6s, translate 2s, left step-end 1s; }
+:target-within > .go::before { opacity: 0.6; background: rgba(255, 255, 255, 0); color: rgba(0, 0, 0, 0); left: 9999vmin; }
+.target-within:target > .go::before {
+    transition: background 0.6s linear, transform linear 1s, left 1s step-end, opacity 0.6s linear;
+    background: red; color: black; mask-image: none; border: thin solid black;
+    padding: 0; top: 0; left: -9999vmin; right: unset;
+    position: fixed; width: auto; height: auto;
+    content: '← back' attr(href);
+    opacity: 0;
+}
+:target-within > .go::after { --distance: calc(0 - var(--width)) !important; left: 9999vmin; transition: background 0.6s var(--ease-out-bounce), transform 1s var(--ease-out-bounce), left 1s step-end, opacity 1s step-end; }
+.target-within > .go::after { --distance: calc(0 - var(--width)) !important; left: 9999vmin; transition: background 0.6s var(--ease-out-bounce), transform 1s var(--ease-out-bounce), left 1s step-end, opacity 1s step-end; }
+.target-within:not(:target) > .go::before {
+    animation: 1s anim 1s;
+    transition: background 0.6s, transform 1s, left 1s step-end;
+    background: red; color: black; mask-image: none; border: thin solid black;
+    padding: 0; top: 0; left: -9999vmin; right: unset;
+    position: fixed; width: auto; height: auto;
+    content: '← back' attr(href);
+    opacity: 0.9;
+}
+@keyframes anim {
+ 0% { opacity: 0; }
+ 100% { opacity: 0.9; }
+}
+@keyframes animout {
+ 0% { opacity: 0.9; }
+ 50% { opacity: 0; }
+ 100% { opacity: 1; }
+}
+/** { transition: all 2s step-end 1000s !important; }*/
+
+.target-within:not(:target) > .go { /*font-size: 1%;*/ width: 0; height: 0; border: none; background: none; color: transparent; outline: none; }
 .go:hover::after { --distance: calc(var(--min-distance) + var(--shift)); background-position-x: 25%; /* don't go to 100% because the easing goes beyond the value */ }
 .go::after {
     --width: 10; /* vmin */
@@ -209,10 +237,6 @@ html, body { height: 100%; }
     */
 }
 
-@keyframes trans { 
-    0% { background: rgba(214, 93, 184, 0.719); }
- }
-
 .rest { position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
 .scene:target-within:not(:target) > .room.room-test:not(:target-within) { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); }
 .scene.target-within:not(:target) > .room.room-test:not(.target-within) { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); }
@@ -224,7 +248,7 @@ html, body { height: 100%; }
 .object:target-within:before { opacity: 1; }
 .object.target-within:before { opacity: 1; }
 .object:before {
-    content: "← back";
+    content: normal;/*"← back"; for hover only*/
     border: thin solid brown;
     background: white;
     z-index: 999;