Questions sur un code en hover

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Questions sur un code en hover

Message par Bobby302 le Lun 15 Fév 2016 - 13:05

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : création du nouveau profil
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour à toutes et à tous,

avant de partir dans mes questions je vous ai joint une image récapitulative et très schématique de ce que je veux demander. Rapides explications sur le schéma.

Au début (image à gauche) nous avons une div A entière qui n'a aucun fond et qui contient l'avatar et le pseudo seulement d'afficher. Lorsqu'on passe la souris sur cette div A générale, (image à droite), il y a la date d'inscription, les messages, les boutons d'édition etc qui apparaissent en même temps qu'un fond d'une couleur sur l'ensemble de la div A.

Cependant, cette div A comprend plusieurs autres div avec les différentes variables de forumactif dans celles-ci et chacune de ces autres div a son propre CSS associé.

J'ai compris et ai réussi à faire apparaitre en hover le fond coloré et les textes (les textes j'ai triché en les mettant de la même couleur que le fond) mais pour le pseudo et les boutons mp, profil etc, pour qu'ils apparaissent dans la div A générale , il faut que je passe la souris sur la div propre aux mp et profil.

Ma question est: comment puis-je faire pour que toutes les div comprises dans la div A apparaissent toutes en même temps que lorsque je passe la souris à un endroit de la div A svp? Je sais qu'il y a une histoire de parent /enfant dans le css mais je ne le comprends pas encore trop.

Merci d'avance Smile


Dernière édition par Bobby302 le Jeu 18 Fév 2016 - 15:38, édité 1 fois

Bobby302
*

Messages : 45
Inscrit(e) le : 07/06/2015

http://eos.forumactif.org/
Bobby302 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Questions sur un code en hover

Message par MlleAlys le Mar 16 Fév 2016 - 0:10

Bonjour,

Le principe du code css est le suivant :

En temps normal les div dans la div A ne sont pas affichés :
Code:
A div { display: none; }
Au survol de la div A on affiche les div à l'intérieur :
Code:
A:hover div { display: block; }

A adapter et à compléter ^^

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Questions sur un code en hover

Message par Bobby302 le Mer 17 Fév 2016 - 11:04

Bonjour,

merci de la réponse MlleAlys, malheureusement le display: none a fait disparaitre carrément la zone mais pas que visuellement. Il n'y a plus du tout de profil Sad et au passage de la souris sur une zone, rien n'apparait.
Je tente des choses en attendant d'une solution ou une alternative Smile

Bobby302
*

Messages : 45
Inscrit(e) le : 07/06/2015

http://eos.forumactif.org/
Bobby302 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Questions sur un code en hover

Message par MlleAlys le Mer 17 Fév 2016 - 13:34

Si les dimensions du bloc A ne sont pas fixées et qu'il se retrouve vide, alors il peut donner l'impression de "disparaitre" également. Vous pouvez également utiliser la propriété "visibility" plutôt que "display" pour que les div à l'intérieur du bloc A soient toujours là mais juste invisibles :
Code:
A div { visibility: hidden; }
A:hover div { visibility: visible; }
En action : https://jsfiddle.net/krtaa9sk/1/
Sinon, si vous aviez un lien vers votre test, je pourrais inspecter pour trouver plus facilement les erreurs et mieux vous aider.

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Questions sur un code en hover

Message par Bobby302 le Jeu 18 Fév 2016 - 12:02

Bonjour,
Hm alors ça le cache bien mais ça le fait pas réapparaitre après x)

Autant j'avais réussi les hover pour les sous div autant là je suis paumé lol Je vous mets le code du template et je vous joins en mp un complément avec le lien du fofo test (je ne mets jamais le test en public). Je vous remercie d'avance encore, j'espère arriver surtout à comprendre ce qui cloche pour un hover général qui n'est pas div par div. Smile

Code:
    <script type="text/javascript">
    //<![CDATA[
    var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
    $(function(){

        if(typeof(_atc) == "undefined") {
            _atc = { };
        }
       
        _atc.cwait = 0;
        $('.addthis_button').mouseup(function(){
            if ($('#at15s').css('display') == 'block') {
                addthis_close();
            }
        });
    });

    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>

    <table width="100%" border="0" cellspacing="2" cellpadding="0">
    <tr>
    <td align="left" valign="middle" nowrap="nowrap">
    <span class="nav">
    <!-- BEGIN switch_user_authpost -->
    <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a> 
    <!-- END switch_user_authpost -->
    <!-- BEGIN switch_user_authreply -->
    <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
    <!-- END switch_user_authreply -->
    </span>
    </td>
    <td class="nav" valign="middle" width="100%">
    <span class="nav" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                    <a class="nav" href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a>
                    <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}" itemprop="url"><span itemprop="title">{L_ALBUM}</span></a>-->
                    {NAV_CAT_DESC_SECOND}
                </span>
    </td>
    <td align="right" valign="bottom" nowrap="nowrap" width="100%">
    <!-- BEGIN switch_twitter_btn -->
    <span id="twitter_btn" style="margin-left: 6px; ">
    <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </span>
    <!-- END switch_twitter_btn -->
   
    <!-- BEGIN switch_fb_likebtn -->
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
    <!-- END switch_fb_likebtn -->
   
    <span class="gensmall bold">
    <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a>
    <!-- BEGIN switch_plus_menu -->
      |
    <script type="text/javascript">//<![CDATA[
    var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
    var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
    var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
    var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
    var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
    var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
    insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
    //]]>
    </script>
    <!-- END switch_plus_menu -->
    </span>
    </td>
    </tr>
    </table>


    <div class="titre_topic">{TOPIC_TITLE}</div>

    <div class="forumline">
    <!-- BEGIN topicpagination -->
    <span class="gensmall">{PAGINATION}</span>
    <!-- END topicpagination -->
    {POLL_DISPLAY}
    <!-- BEGIN postrow -->
    <!-- BEGIN hidden -->
    {postrow.hidden.MESSAGE}
    <!-- END hidden -->
    <!-- BEGIN displayed -->

                <div class="profil_reel">
                  <a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
                  <div class="avatar_reel">{postrow.displayed.POSTER_AVATAR}</div>
                  <div class="pseudo_reel">{postrow.displayed.POSTER_NAME}</div>
                  <div class="consrtuctionpro">
                  <div class="info_reel">
                  <!-- BEGIN profile_field -->
    {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
          <!-- END profile_field -->
                  </div>
                  <div class="online">{postrow.displayed.ONLINE_IMG}</div>
                  <div class="boutonsprofil_reel">
                  {postrow.displayed.PROFILE_IMG}{postrow.displayed.PM_IMG}{postrow.displayed.EMAIL_IMG}
                  </div>
                  <div class="message_infos">
                    <img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}  <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}
                  </div>
                  <div class="options_message">{postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}</div>
                  </div>
                  </div>
     
      <div style="clear: both;"></div>

              <div class="contenu_message">
                                                    <!-- BEGIN switch_vote_active -->
    <div class="vote gensmall">
    <!-- BEGIN switch_vote -->
    <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
    <!-- END switch_vote -->

    <!-- BEGIN switch_bar -->
    <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
    <!-- BEGIN switch_vote_plus -->
    <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
    <!-- END switch_vote_plus -->

    <!-- BEGIN switch_vote_minus -->
    <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
    <!-- END switch_vote_minus -->
    </div>
    <!-- END switch_bar -->

    <!-- BEGIN switch_no_bar -->
    <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
    <!-- END switch_no_bar -->

    <!-- BEGIN switch_vote -->
    <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
    <!-- END switch_vote -->
    </div>
    <!-- END switch_vote_active -->
                                            <div class="postbody">
    <div>{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">
    {postrow.displayed.SIGNATURE}
    </div>
    <!-- END switch_signature -->

              </div>
              </div>       
         
             
             
             
    <table><tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
    <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
    <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
    </td>
    <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
    </td>
              </tr></table>
    <!-- BEGIN first_post_br -->
    </div>
    <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="3" height="28">
    <span class="genmed">{no_post.L_NO_POST}</span>
    </td>
    </tr>
    <!-- END no_post -->
    <tr align="right">
    <td class="catBottom" colspan="3" height="28">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="9%" class="noprint"> </td>
    <td align="center" class="t-title"><a name="bottomtitle"></a>
                                              <div class="titre_topic">{TOPIC_TITLE}</div></td>
    <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    <table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
    <tr>
    <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
    <!-- BEGIN topicpagination -->
    <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
    <!-- END topicpagination -->
    </tr>
    <!-- BEGIN switch_user_logged_in -->
    <!-- BEGIN watchtopic -->
    <tr>
    <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
    </tr>
    <!-- END watchtopic -->
    <!-- END switch_user_logged_in -->
    </table>

    <!-- BEGIN promot_trafic -->
    <table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
    <tr>
    <td class="catBottom" height="28">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
    <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>

    <table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
    <tr>
    <td class="catBottom" height="28">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
    <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td class="row2 postbody" valign="top">
    <!-- BEGIN link -->
    » <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
    <!-- END link -->
    </td>
    </tr>
    </table>
    <!-- END promot_trafic -->

    <!-- BEGIN switch_forum_rules -->
    <table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
    <tbody>
    <tr>
    <td class="catBottom">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tbody>
    <tr>
    <td valign="top">
    <h1 class="cattitle"> {L_FORUM_RULES}</h1>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    <tr>
    <td class="row1 clearfix">
    <table>
    <tr>
    <!-- BEGIN switch_forum_rule_image -->
    <td class="logo">
    <img src="{RULE_IMG_URL}" alt="" />
    </td>
    <!-- END switch_forum_rule_image -->
    <td class="rules postbody">
    {RULE_MSG}
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    <!-- END switch_forum_rules -->

    <table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td class="row2" colspan="2" align="center" style="padding:0px">
    <!-- BEGIN switch_user_logged_in -->
    <a name="quickreply"></a>
    {QUICK_REPLY_FORM}<br />
    <!-- END switch_user_logged_in -->
    </td>
    </tr>
    <tr>
    <td style="margin:0; padding: 0;" colspan="2">
    <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
    <tbody>
    <!-- BEGIN show_permissions -->
    <tr>
    <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
    <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
    </tr>
    <!-- END show_permissions -->
    <tr>
    <td class="catBottom" colspan="2" height="28">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
    <!-- BEGIN show_permissions -->
    <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
    <!-- END show_permissions -->
    </tr>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    <tr>
    <td style="margin:0; padding: 0;" colspan="2">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
    <tbody>
    <tr>
    <td class="catBottom" colspan="2" height="28">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
    <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
    </tr>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </table>

    <form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
    <table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
    <tr>
    <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
    <span class="nav">
    <!-- BEGIN switch_user_authpost -->
    <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a> 
    <!-- END switch_user_authpost -->
    <!-- BEGIN switch_user_authreply -->
    <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
    <!-- END switch_user_authreply -->
    </span>
    </td>

    <!-- BEGIN viewtopic_bottom -->
    <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>
    <!-- END viewtopic_bottom -->

    <!-- BEGIN moderation_panel -->
    <td align="center">
    <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
    </td>
    <td align="center" width="250">
    <span class="gensmall"> </span>
    </td>
    <!-- END moderation_panel -->
    </tr>
    </table>
    </form>

    <!-- BEGIN viewtopic_bottom -->
    <table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
    <tr>
    <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
    <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
    <input type="hidden" name="t" value="{TOPIC_ID}" />

    <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
    <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

    <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" /></span>
    </form>
    </td>
    </tr>
    </table>
    <!-- END viewtopic_bottom -->

    <table>

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

Bobby302
*

Messages : 45
Inscrit(e) le : 07/06/2015

http://eos.forumactif.org/
Bobby302 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Questions sur un code en hover

Message par MlleAlys le Jeu 18 Fév 2016 - 13:55

Merci, c'est plus facile pour moi de voir directement sur la page concernée les codes qui sont en jeu. ^^

Alors je vois que vous avez un bloc "profil_reel" dans lequel vous avez différents blocs pour l'avatar, le pseudo, et enfin un dernier que vous avez appelé "consrtuctionpro", lui-même composé de plusieurs éléments.
La première question est donc : Quel élément doit jouer le rôle du bloc A ? Et lesquels doivent apparaitre au passage de la souris sur le bloc A ?

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Questions sur un code en hover

Message par Bobby302 le Jeu 18 Fév 2016 - 14:25

Ah oui zut j'ai oublié de supprimer la div construction pro qui n'était qu'un test. A la base ce n'est pas dans le code, je suis désolé de ne pas l'avoir supprimé avant.

Alors à la base j'aurais aimé qu'on ne voit que l'avatar et le pseudo (sans le background noir)et qu'au passage sur un endroit de la div "profil reel" qui contient tout (dont les boutons edit, date du post, boutons mp profil, messages, date d'inscription) , tout le reste apparait et même le fond d'une couleur noire. Mais ça ne se dissocie pas. :/

PS: j'ai remis le code en l'état sans mes tests afin que vous puissiez y voir plus clair et avoir désormais un réel visuel.


Bobby302
*

Messages : 45
Inscrit(e) le : 07/06/2015

http://eos.forumactif.org/
Bobby302 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Questions sur un code en hover

Message par MlleAlys le Jeu 18 Fév 2016 - 14:51

Donc "profil_reel" joue le rôle du bloc "A" (c'est la div qui contient les autres, c'est donc la div "parent")

Quelques infos techniques :
- En css, pour indiquer qu'un élément est à l'intérieur d'un autre, on les indique côte à côte.
Ex : "div span {...}" : la mise en forme sera appliquée aux "span qui sont à l'intérieur d'une div".
- En css, pour appliquer une mise en forme à plusieurs éléments, on sépare ces éléments par une virgule.
Ex : "div, span {...}" : la mise en forme sera appliquée aux div et aux span.
- La speudo class :hover indique que l'élément sur lequel elle est appliquée doit être survolé par la souris pour que la mise en forme s'applque.
Ex : "div:hover span {...}" : la mise en forme s'appliquera aux span qui sont à l'intérieur d'une div, et quand la div sera survolée
Ex : "div span:hover {...}" : la mise en forme s'appliquera aux span à l'intérieur d'une div, et quand le span sera survolé


- Profil_reel n'a pas de fond en temps normal :
- Localisez dans votre feuille de style le code css suivant qui correspond à la mise en forme de profil_reel :
Code:
.profil_reel {
    width: 100%;
    height: 100px;
    background: #2C2C2C;
    border-top: 1px solid #CECECE;
    border-bottom: 1px solid #CECECE;
}
- retirez la ligne background: #2C2C2C; qui correspond au fond sombre, ce qui donne :
Code:
.profil_reel {
    width: 100%;
    height: 100px;
    border-top: 1px solid #CECECE;
    border-bottom: 1px solid #CECECE;
}

- Au survol du bloc profil_reel, le fond de celui-ci devient sombre :
- dans votre feuille de style, ajoutez le code suivant :
Code:
.profil_reel:hover {
    background: #2C2C2C;
}


- En temps normal, si j'ai bien compris, les blocs info_reel, online, boutonsprofil_reel, message_infos et options_message ne sont pas visibles :
- dans votre feuille de style, ajoutez le code cs suivant :
Code:
.info_reel, .profil_reel .online, .boutonsprofil_reel, .message_infos, .options_message {
    visibility: hidden;
}
(j'ai précisé ".profil_reel .online", c'est à dire les éléments de classe online qui sont dans profil_reel pour être sûr que ça ne fait disparaitre que celui là, au cas où il y aurait un autre élément quelque part sur le forum qui s'appelle également "online")


- Puis, au survol de profil_reel, ces blocs qui sont à l'intérieur sont à nouveau visibles :
Code:
.profil_reel:hover .info_reel, .profil_reel:hover .online, .profil_reel:hover .boutonsprofil_reel, .profil_reel:hover .message_infos, .profil_reel:hover .options_message {
    visibility: visible;
}

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Questions sur un code en hover

Message par Bobby302 le Jeu 18 Fév 2016 - 15:37

Wahou c'est super merci beaucoup! Je me sens un peu bête du coup car c'était pa la mer à boire mais je me suis bien compliquée la vie >< Je mets le topic en résolu mais j'ai une dernière question. Sur des modèles de hover j'avais vu ceci (et avais mis ça sur certains div contenues dans le fameux A pour les faire apparaitre)

Code:
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;

Ca fait quoi de différent au hover avec les "transform" svp? Surprised

En tout cas question facultative, c'est juste pour mon apprentissage, mais problème résolu, un grand merci à vous Mlle Alys Smile ::fleur::

Bobby302
*

Messages : 45
Inscrit(e) le : 07/06/2015

http://eos.forumactif.org/
Bobby302 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Questions sur un code en hover

Message par MlleAlys le Jeu 18 Fév 2016 - 16:04

Ces propriétés touchent les transformations et les transitions en css. Ce sont deux choses différentes, et je pense que l'utilisation des propriétés de transformation sont ici une erreur.

Les transitons par contre sont intéressantes dans le cs des :hover puisqu'elles permettent de contrôler le passage entre deux états (ici l'état en temps normal, et celui en :hover).

On peut ainsi contrôler en indiquant :

- la propriété sur laquelle va s'appliquer la transition (ex "background", "font-size", "top", etc ; si on veut appliquer la même transition à toutes les propriétés s'il y en a plusieurs qui changent, on met "all") ; à noter, certaines propriétés ne permettent pas de transition (ex: display).

- la durée de la transition (en secondes généralement)

- la courbe de vitesse de la transition ( "linear" pour la même vitesse du début à la fin, "ease" pour un effet plus fluide en accélérant au début et décélérant à la fin, "ease-out" pour commencer rapide et diminuer à la fin, "ease-in" inversement)


Les préfixes -webkit-, -o- et -moz- (pour les plus utilisés) sont des préfixes destinés à des versons moins récentes de navigateurs qui ne prendraient pas encore en compte la propriété "normale" ( -o- pour opera, -moz_ pour mozilla, -webkit- pour chrome, safari, android, etc) ; normalement on dervait en avoir de moins en moins besoin...
(Inutile de se mettre à mettre des préfixes partout, certaines propriétés n'en ont pas besoin, d'autres certains seulement mais pas tous, etc!)
On indique en général d'abord les propriétés avec les préfixes, et en dernier la propriété sensée être lue par tous.


La propriété de transition se met donc dans la mise en forme de l'élément dont une propriété est modifiée lors du :hover.
Dans notre cs, si on veut par exemple une transition d'une demi seconde pour l'apparition du fond sombre, on peut ajouter
Code:
transition: background 0.5s ease-out;
dans la mise en forme de profil_reel, ce qui donne avec les propriétés à préfixe :
Code:
.profil_reel {
    width: 100%;
    height: 100px;
    border-top: 1px solid #CECECE;
    border-bottom: 1px solid #CECECE;
    -webkit-transition: background 0.5s ease-out;
    -o-transition: background 0.5s ease-out;
    -moz-transition: background 0.5s ease-out;
    transition: background 0.5s ease-out;
}
(j'ai mis ease-out un peu au pif !)
Si on ne précise pas certaines valeurs, par exemple dans le code que vous avez donné il n'y avait que la durée, alors par défaut ça s'applique à toutes les propriétés ("all") et avec la courbe "ease".


C'est également une propriété transition qui est la cause du léger décalage d'apparition et de disparition de l'image du profil, à mon avis inutile, vous pouvez localiser et supprimer le code suivant de votre feuille de style :
Code:
.boutonsprofil_reel img {
    border: 1px solid #000000;
    transition: 500ms;
}


Les transformations en css, c'est encore autre chose...

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Questions sur un code en hover

Message par Bobby302 le Jeu 18 Fév 2016 - 18:10

Oh super , très détaillée comme explication merci beaucoup ! *_* Pour les préfixes je savais et j'avais déjà vu un tuto sur les transitions mais il est vrai que c'était bizarre de voir ça avec le hover pour moi Surprised J'analyserai tout ça et je verrai si j'arrive à l'appliquer dans de futurs projets. ^-^

Encore un immense merci, bonne suite ici, peut-être à une prochaine ahah.

Topic à lock et à archiver. Thanks

Bobby302
*

Messages : 45
Inscrit(e) le : 07/06/2015

http://eos.forumactif.org/
Bobby302 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum