better approach to hover css

Conflicts:
	builds/4chan-X.user.js
	builds/crx/script.js

src/General/css/style.css

@@ -108,7 +108,7 @@ div.center:not(.ad-cnt) {
 /* fixed, z-index */
 #overlay,
 #fourchanx-settings,
-#qp, .ihover,
+#qp, #ihover,
 #navlinks, .fixed #header-bar,
 :root.float #updater,
 :root.float #thread-stats,
@@ -124,7 +124,7 @@ div.center:not(.ad-cnt) {
 #notifications {
   z-index: 70;
 }
-#qp, .ihover {
+#qp, #ihover {
   z-index: 60;
 }
 #menu {
@@ -714,19 +714,19 @@ span.hide-announcement {
 .fileText:hover .fntrunc,
 .fileText:not(:hover) .fnfull,
 .expanded-image > .post > .file > .fileThumb > img[data-md5],
-:not(.expanded-image) > .post > .file .full-image {
+:not(.expanded-image) > .post > .file .full-image:not(#ihover) {
   display: none;
 }
 .expanding {
   opacity: .5;
 }
-:root.fit-height .full-image {
+:root.fit-height .full-image:not(#ihover) {
   max-height: 100vh;
 }
-:root.fit-width .full-image {
+:root.fit-width .full-image:not(#ihover) {
   max-width: 100%;
 }
-.ihover {
+#ihover {
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   max-height: 100%;

src/Images/ImageExpand.coffee

@@ -107,25 +107,23 @@ ImageExpand =
     return if post.isHidden or post.file.isExpanded or $.hasClass thumb, 'expanding'
     $.addClass thumb, 'expanding'
     naturalHeight = if isVideo then 'videoHeight' else 'naturalHeight'
-    if img = post.file.fullImage
+    if el = post.file.fullImage
       # Expand already-loaded/ing picture.
-      TrashQueue.remove img
+      TrashQueue.remove el
-      $.rmClass img, 'ihover'
+      el.controls = (el.parentNode isnt thumb.parentNode)
-      $.addClass img, 'full-image'
+      $.asap (-> el[naturalHeight]), ->
-      img.controls = (img.parentNode isnt thumb.parentNode)
-      $.asap (-> img[naturalHeight]), ->
         ImageExpand.completeExpand post
       return
-    post.file.fullImage = img = $.el (if isVideo then 'video' else 'img'),
+    post.file.fullImage = el = $.el (if isVideo then 'video' else 'img'),
       className: 'full-image'
       src: src or post.file.URL
     if isVideo
-      img.loop = true
+      el.loop = true
-      img.controls = Conf['Show Controls']
+      el.controls = Conf['Show Controls']
-    $.on img, 'error', ImageExpand.error
+    $.on el, 'error', ImageExpand.error
     $.asap (-> post.file.fullImage[naturalHeight]), ->
       ImageExpand.completeExpand post
-    $.after (if img.controls then thumb.parentNode else thumb), img
+    $.after (if el.controls then thumb.parentNode else thumb), el
 
   completeExpand: (post) ->
     {thumb} = post.file

src/Images/ImageHover.coffee

@@ -14,15 +14,14 @@ ImageHover =
     if post.file.fullImage
       el = post.file.fullImage
       TrashQueue.remove el
-      $.rmClass el, 'full-image'
-      $.addClass el, 'ihover'
     else
       el = $.el (if isVideo then 'video' else 'img'),
-        className: 'ihover'
+        className: 'full-image'
         src: post.file.URL
       post.file.fullImage = el
       {thumb} = post.file
       $.after (if isVideo and Conf['Show Controls'] then thumb.parentNode else thumb), el
+    el.id = 'ihover'
     el.dataset.fullID = post.fullID
     if isVideo
       el.loop = true
@@ -40,8 +39,7 @@ ImageHover =
         if isVideo
           el.pause()
           TrashQueue.add el
-        $.rmClass el, 'ihover'
+        el.removeAttribute 'id'
-        $.addClass el, 'full-image'
     $.on el, 'error', ImageHover.error
   error: ->
     return unless doc.contains @