diff --git a/src/components/difficulty-background.js b/src/components/difficulty-background.js
new file mode 100644
index 0000000..5d61ec4
--- /dev/null
+++ b/src/components/difficulty-background.js
@@ -0,0 +1,17 @@
+/**
+ * Handle difficulty raycastability.
+ * Needed since state component does not have a bind-toggle that works within a bind-for.
+ */
+AFRAME.registerComponent('difficulty-background', {
+  schema: {
+    enabled: {type: false}
+  },
+
+  update: function () {
+    if (this.data.enabled) {
+      this.el.setAttribute('raycastable', '');
+    } else {
+      this.el.removeAttribute('raycastable');
+    }
+  }
+});
diff --git a/src/templates/menu.html b/src/templates/menu.html
index acce04a..77536d7 100644
--- a/src/templates/menu.html
+++ b/src/templates/menu.html
@@ -176,7 +176,7 @@
                 bind-item__animation__mouseleave="enabled: menuSelectedChallenge.difficulty !== item"
                 bind-item__animation__mouseentervisible="enabled: menuSelectedChallenge.difficulty !== item"
                 bind-item__animation__mouseleavevisible="enabled: menuSelectedChallenge.difficulty !== item"
-                bind-toggle__raycastable="menuActive && !!menuSelectedChallenge.id && menuSelectedChallenge.difficulty !== item"
+                bind-item__difficulty-background="enabled: menuActive && !!menuSelectedChallenge.id && menuSelectedChallenge.difficulty !== item"
                 geometry="primitive: plane; width: 0.4; height: 0.2"
                 material="shader: flat; color:  {% endraw %}{{ COLORS.UI_ACCENT }}{% raw %}; transparent: true; opacity: 0.0"
                 position="0 -0.005 0"