• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Swapping images or text

New Here ,
Jan 07, 2022 Jan 07, 2022

Copy link to clipboard

Copied

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

Views

87

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 07, 2022 Jan 07, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 07, 2022 Jan 07, 2022

Copy link to clipboard

Copied

LATEST

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines