Skip to main content
S
smealing1
Participant
January 7, 2022
Question

Swapping images or text

  • January 7, 2022
  • 2 replies
  • 178 views

Dear All

 

I have a simple question (I think).  I have a page on which I have a number of seprate divs with each div containing the logo of a client I have worked for.  In total there are 15 such divs/logos displayed on the page arrranged in a rectangular 5x3 fashion.

 

In the bottom right of the same page I have an empty div (with an id of "summary" and a separate class of its own in CSS) that I would like to use to display a brief summary of the projects undertaken for each client.  I would like the associated text (be this text or a separate image file of the text - it doesn't matter) to be displayed in the "summary div" when the mouse hovers over the associated div containing the client logo with the summary div empty when no mouse over is present.

 

Each of the divs containing the client logos has its own id and class so it should be a very simple task to be able to do this but at the moment this seems to be beyond my current capabilities.  Any suggestions most gratefully received.

 

Kind Regards

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 7, 2022

    Ideally, you would use an onClick event trigger -- for ALL devices that don't have a mouse  -- to open and collapse a panel containing details.

     

    This can be done quite easily with plain JavaScript. 

     

    Or, if you use Bootstrap responsive framework, add a collapsing panel and data-toggle button. See link below.

    https://getbootstrap.com/docs/4.6/components/collapse/

     

    For better answers, we need to see your code.  A URL to your online page would be the quickest & best way for us to help. 

     

    Nancy O'Shea— Product User & Community Expert
      Jon Fritz
      Community Expert
      Jon FritzCommunity Expert
      Community Expert
      January 7, 2022

      There are probably an infinite number of ways to do this, the fastest for me would be to use the CSS the content property, the sibling selector (~) with :hover and :after, like so (copy and paste into a new document)...

       

      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Quick CSS Hover</title>
      <style>
      div {
      display:inline-block;
      padding:50px;
      border:1px solid black;
      }
      #text:after {
      content:"somethingT";
      }
      #div1:hover ~ #text:after {
      content:"This is the text for div1";
      }
      #div2:hover ~ #text:after {
      content:"This is the text for div2";
      }
      #div3:hover ~ #text:after {
      content:"This is the text for div3";
      }
      #div4:hover ~ #text:after {
      content:"This is the text for div4";
      }
      #div5:hover ~ #text:after {
      content:"This is the text for div5";
      }
      </style>
      </head>

      <body>
      <div id="div1">something1</div>
      <div id="div2">something2</div>
      <div id="div3">something3</div>
      <div id="div4">something4</div>
      <div id="div5">something5</div>
      <div id="text"></div>
      </body>
      </html>

       

      But, it really depends on how your specific HTML is set up and whether you care about mobile users. Mobile devices don't have a mouse, so firing :hover actions becomes tricky.

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices