Hover intempestif dans le template viewtopic_body

[Yunie16]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis que j'ai modifié le template
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

J'ai un petit problème depuis que j'ai modifié mon template viewtopic_body : l'apparition d'un background blanc sous la colonne de gauche au passage de la souris n'importe où dans le wrap. Je me disais que je verrais plus tard pour régler ça, mais je viens de créer un tableau dans un sujet et le problème est apparu avec lui aussi, le fond arrive quand je survole le tableau.

J'ai essayé de mettre dans le template un background:none à toutes les td, tr et table au survol, mais soit je m'y prends comme un manche, soit il y a une autre subtilité que je ne maîtrise pas...

Je vous mets le template ici :

Code:

<!-- BEGIN switch_plus_menu -->
<script type="text/javascript">
   //<![CDATA[
   var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}';
</script>
<!-- END switch_plus_menu -->
<script type="text/javascript">

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id) {
    try {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }

        if( regId > 0) {
            $('.post--' + id).toggle(0, function() {
            if( $(this).is(":visible") ) {
               $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
            } else {
               $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
            }
         });
        }
    } catch(e) { }

   return false;
};

//]]>
</script>

<!-- BEGIN switch_push_direct_send -->
<div id="push-answer" class="jqmWindow"></div>
<script src="{JQUERY_DIR}jqmodal/jqmodal.js" type="text/javascript"></script>
<script type="text/javascript">
   $(document).ready(function() {
      $('#push-answer').jqm({toTop: true});

      $('#push-bell').click(function () {
         return sendWebPush({TOPIC_ID});
      });
      function sendWebPush(tId){
         $.get("/ajax_push.php?topicID=" + tId ).done(showPushAnswer);
      }

      function showPushAnswer(data) {
         $('#push-answer').html(data).jqmShow();
         $('.jqmOverlay').bgiframe();
         $('#push-answer').bgiframe();
      }
   });
   //]]>
</script>
<!-- END switch_push_direct_send -->

<div class="sub-header">
   <div class="sub-header-info">
      <div class="sub-header-path">
         <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
         {NAV_CAT_DESC}
      </div>
   </div>

   <div class="sub-header-buttons">
      <!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow" {S_POST_NEW_TOPIC} title="{T_POST_NEW_TOPIC}" class="YUbtn">{L_POST_NEW_TOPIC}</a>
      <!-- END switch_user_authpost -->
      <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}" {S_POST_REPLY_TOPIC} title="{T_POST_REPLY_TOPIC}" class="YUbtn" style="margin-left:10px">{L_POST_REPLY_TOPIC}</a>
      <!-- END switch_user_authreply -->
      <!-- BEGIN switch_user_authnoreply -->
         <a href="{U_LOGIN_REPLY_TOPIC}" title="{T_LOGIN_REPLY_TOPIC}" class="login-for button1">
            <img src="{I_LOGIN_REPLY_TOPIC}" alt="{T_LOGIN_REPLY_TOPIC}"/>
            {L_LOGIN_REPLY_TOPIC}
         </a>
      <!-- END switch_user_authnoreply -->
   </div>
</div>

<div class="topic-actions">
   <!-- BEGIN topicpagination -->
      <div class="pagination">
         {PAGINATION}
      </div>
   <!-- END topicpagination -->
   </div>

<table class="forumline" border="0" cellspacing="1" cellpadding="0" style="margin:auto;">
   <tr>
          <div class="topictitre">{TOPIC_TITLE}
                  </div>
      </tr>
      
   {POLL_DISPLAY}
   <!-- BEGIN postrow -->
   <!-- BEGIN hidden -->
   <tr>
      <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
   </tr>
   <!-- END hidden -->
   <!-- BEGIN displayed -->
  <tr class="post" style="900px;">
      <td valign="top">
                      <div class="topicprofil">
                      <div class="topicava">
                                      {postrow.displayed.POSTER_AVATAR}<div class="topichover"><div class="topichover_inside">
                       
                          <div class="champ_profil"><!-- BEGIN profile_field -->{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}<!-- END profile_field --></div>
   
                        </div> </div>
                                    </div>
                                    <div class="topicpseudo">
                                      {postrow.displayed.POSTER_NAME}<br /><div class="topicrank">{postrow.displayed.POSTER_RANK}</div>
                                      <!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
                                      </div>
                        </div>
        <div class="elt-declencheur">
         
</div>
        <div class="afficher-masquer infos-supp" style="display: none; height:125px;overflow:auto!important;background:var(--less-white);padding:10px;margin-top:5px;object-fit:cover;color:var(--couleur_texte);"></div>
       
      </td>
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="100%" style="background:none!important;">
         <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
            <td colspan="2"><tr height="100%" valign="top">
                                  <a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -70px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
                                  <div class="topicbody">
                                      <span class="postdetails">{postrow.displayed.POST_DATE}</span>
                                    <div class="postboutons">
               <a href="{postrow.displayed.QUOTE_URL}">citer</a> <a href="{postrow.displayed.EDIT_URL}">éditer</a> <a href="{postrow.displayed.DELETE_URL}">supprimer</a><br />
                                    </div><div class="boutons-sujet"><!-- BEGIN switch_likes_active -->
            <div class="fa_like_div">
                  
               <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
                  
                  <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
               </button>
               <!-- BEGIN switch_dislike_button -->
               <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">

                  <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
               </button>
               <!-- END switch_dislike_button -->
            </div>
            <!-- END switch_likes_active -->
                                      </div>
                     <div style="margin-top:15px;padding:10px;text-align:justify;min-height:424px;">{postrow.displayed.MESSAGE}</div>

                     <!-- BEGIN switch_attachments -->
                     <dl class="attachbox">
                        <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                        <dd>
                           <!-- BEGIN switch_post_attachments -->
                           <dl class="file">
                              <dt>
                                 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

                                 <!-- BEGIN switch_dl_att -->
                                 <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                 <!-- END switch_dl_att -->

                                 <!-- BEGIN switch_no_dl_att -->
                                 {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                 <!-- END switch_no_dl_att -->
                              </dt>

                              <!-- BEGIN switch_no_comment -->
                              <dd>
                                 <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                              </dd>
                              <!-- END switch_no_comment -->

                              <!-- BEGIN switch_no_dl_att -->
                              <dd>
                                 <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                              </dd>
                              <!-- END switch_no_dl_att -->

                              <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                           </dl>
                           <!-- END switch_post_attachments -->
                        </dd>
                     </dl>
                     <!-- END switch_attachments -->

                     <div class="clear"></div>
                     <!-- BEGIN switch_signature -->
                     <div class="signature_div" style="margin-top:-20px;">
                        {postrow.displayed.SIGNATURE}
                     </div>
                     <!-- END switch_signature -->
                                  <!-- BEGIN switch_likes_active -->
                                    <!-- BEGIN switch_like_list -->
            {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
            <!-- END switch_like_list -->
                                    <!-- END switch_likes_active -->
                  </div></td></tr></table></td>
   </tr>
   <!-- BEGIN first_post_br -->
</table>
<hr />
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
      <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
   </tr>
   <!-- END first_post_br -->
   <!-- END displayed -->
   <!-- END postrow -->
   <!-- BEGIN no_post -->
   <tr align="center">
      <td class="row1" colspan="2" height="28">
         <span class="genmed">{no_post.L_NO_POST}</span>
      </td>
   </tr>
   <!-- END no_post -->
   </table>

<div class="sub-header">
   <div class="sub-header-info">
      <div class="sub-header-path">
         <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
         {NAV_CAT_DESC}
      </div>
   </div>

   <div class="sub-header-buttons">
          <!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow" {S_POST_NEW_TOPIC} title="{T_POST_NEW_TOPIC}" class="YUbtn">{L_POST_NEW_TOPIC}</a>
      <!-- END switch_user_authpost -->
      <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}" {S_POST_REPLY_TOPIC} title="{T_POST_REPLY_TOPIC}" class="YUbtn" style="margin-left:10px">{L_POST_REPLY_TOPIC}</a>
      <!-- END switch_user_authreply -->
      <!-- BEGIN switch_user_authnoreply -->
         <a href="{U_LOGIN_REPLY_TOPIC}" title="{T_LOGIN_REPLY_TOPIC}" class="login-for button1">
            <img src="{I_LOGIN_REPLY_TOPIC}" alt="{T_LOGIN_REPLY_TOPIC}"/>
            {L_LOGIN_REPLY_TOPIC}
         </a>
      <!-- END switch_user_authnoreply -->
          <br /><br /><!-- BEGIN switch_user_logged_in -->
         <!-- BEGIN watchtopic -->
          <div class="YUbtn">{S_WATCH_TOPIC}</div>
         <!-- END watchtopic -->
      <!-- END switch_user_logged_in -->
   </div>
</div>

<div class="topic-actions bottom">
   <!-- BEGIN topicpagination -->
      <div class="pagination">
         {PAGINATION}
      </div>
   <!-- END topicpagination -->

   </div>

<!-- BEGIN switch_user_logged_in -->
   <a name="quickreply"></a>
   {QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->

<!-- BEGIN viewtopic_bottom -->
<p class="right">{S_TOPIC_ADMIN}</p>
<!-- END viewtopic_bottom -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github-gist.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script>
<script>
$(document).ready(function() {
   $('pre, code').each(function(i, block) {
      hljs.highlightBlock(block);
   });

   $('.post').each(function() {
      if($(this).find('.postprofile-avatar').html() !== undefined) {
         if (!$(this).find('.postprofile-avatar').html().length) {
            $(this).find('.postprofile-rank').css('border-bottom', 'none');
            $(this).find('.postprofile > dl > dt').css('min-height', $(this).find('.post-head').innerHeight());
         }
      }
   });

   let post_menus= document.getElementsByClassName('post-menu');
   Array.prototype.forEach.call(post_menus,function(post_menu) {
      post_menu.addEventListener('click', function (e) {
         if (e.target.classList.contains('expanded')){
            e.target.innerHTML='+';
            e.target.classList.remove('expanded');
         }else{
            let exp_menus = document.querySelectorAll('.post-menu.expanded');
            Array.prototype.forEach.call(exp_menus,function(exp_menu) {
               exp_menu.innerHTML='+';
               exp_menu.classList.remove('expanded');
            });
            e.target.innerHTML='-';
            e.target.classList.add('expanded');
         }
      });
   });

   document.onclick = function(e){
      if ($(e.target).parents('.menu-wrap').length==0) {
         let exp_menus = document.querySelectorAll('.post-menu.expanded');
         Array.prototype.forEach.call(exp_menus,function(exp_menu) {
            exp_menu.innerHTML='+';
            exp_menu.classList.remove('expanded');
         });
      }
   };
});
</script>
 
<style>.sub-header{width:900px;}
.sub-header-buttons a{color:var(--btn_texte)!important;}
a.nav {color:var(--couleur_texte);}
.topictitre {width:900px;font-family: "Julius Sans One", sans-serif;color:white;height:50px;background:var(--couleur_trois);border-radius:10px 10px 0px 0px;padding:10px;font-size:18px;}
.topicprofil {width:200px;background:none;border:none;}
.post td:hover{background:none;}
.topicava {width:200px;height:320px;margin-top:5px;}
.topicava img {width:200px;height:320px;}
.topichover {width:200px;height:320px;background:var(--degrade2);opacity:0;position:absolute;margin-top:-320px;}
.topichover_inside{background:var(--white);overflow:auto;padding:10px;width:180px;height:300px;margin-top:10px;margin-left:10px;color:var(--couleur_texte);}
.topicava:hover .topichover {opacity:1}
.topicava:hover .topicava img {opacity:0;}
.champ_profil {font-size:12px;color:var(--couleur-texte);}
.topicpseudo {width:200px;height:75px;margin-top:5px;padding:4px;color:var(--couleur_texte);background:var(--less-white);text-align:center;font-size:15px;font-weight:300!important;}
.topicpseudo a{font-weight:300!important;font-family: "Architects Daughter", cursive;color:var(--couleur_texte);}
.topicpseudo img{height:20px;width:auto;margin-left:5px;}
.topicrank {line-height:25px;font-size:14px;font-family:"Noto Serif KR", serif;font-weight: 300;font-style: normal;margin-top:-10px;}
.elt-declencheur {width: 30px;height: 30px;font-size:0px;background: var(--couleur_trois);border-radius:0px 30px 0px 0px;margin-top: -30px;margin-left:0px;font-weight: 900;padding: 5px;box-sizing: border-box;text-transform: uppercase;color: var(--couleur_texte);text-align: center;}
.elt-delcencheur img{width: 17px;height: 17px;object-fit:cover;border-radius:25px;margin-top:10px;margin-left:-5px;}
.afficher-masquer img{object-fit:cover;}
.topicbody {width:695px;min-height:500px;background:var(--less-white);color:var(--couleur_texte);margin-left:5px;margin-top:5px;padding:10px;}
.postboutons {margin-top:-25px;margin-left:495px;}
.postboutons a{color:var(--couleur_texte);margin-left:10px;}
.boutons-sujet {margin-left:275px;margin-top:0px;}
.postdetails {margin-top:10px;font-size:15px;color:var(--yellow);text-transform:uppercase;}
.fa_like_div{}
.fa_like, .fa_liked, .fa_dislike, .fa_disliked {  color: var(--btn_texte);  background:var(--degrade1);  border:none;}
.rep-button, .rep-button:active, .rep-button:focus {    background: var(--degrade1);  text-transform:uppercase;  border: none;    box-shadow: none;    font-family: Trebuchet MS;    font-size: 10px;    height: 30px;  padding:5px; width:70px;text-align:center;}
.fa_like_list {color:var(--couleur_texte);margin-top:20px;}
.fa_like_list a{color:var(--couleur_deux)}
.postbody {padding: 20px;}
.post{border:none;box-shadow:none!important;}
#quick-reply {margin:auto;}</style>

Et merci d'avance à la personne qui se penchera sur cette nouvelle énigme

[MlleAlys]

Bonjour,
Le code qui ajoute un fond blanc étant celui-ci :

Code:

table.forumline tr:hover td {
    background-color: #f5faff;
}

Pour l'écraser vous pouvez ajouter :

Code:

table.forumline tr:hover td {
    background: none;
}

(savez vous vous servir de l'outil "inspecter" de votre navigateur pour trouver les éléments ou codes problématiques ? Si ce n'est pas le cas, ça pourrait vous aider)

[Yunie16]

Merci beaucoup, c'est ce qu'il me fallait !

J'ai déjà essayé mais j'avoue ne pas trop m'y retrouver dans tous les codes qu'ils affichent, je devrais essayer de me pencher sur ça un peu plus pour éviter de venir poser trop de questions ici ^^'