The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Default text section
Chitriguy
post Mar 4 2016, 12:38 PM
Post #1





Group: Members
Posts: 2
Joined: 4-March 16
Member No.: 24,041



Hi gang -

I am trying out CSS for the first time and have stumbled on a road block. I am trying to create a page with a number of buttons on the left that when the mouse hovers over them they display the text associated with them, however, I want to be able to show a default section of text if no one is hovering over a button. How would this be accomplished?

I greatly appreciate any direction anyone can provide.

Here is my current code:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
    <style type="text/css">
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
      
ul {
    list-style: none;
}
.main {
    margin-left: 200px;
    margin-right: 150px;
    }
.buttons {
    margin: 10px;
    padding: 0;
    width:150px;
    position: relative;
}      
.buttons .service {
    width:50%;
    display: inline-block;
    width:200px;
}
.service .desc {
    position: absolute;
    font-size:1rem;
    padding:1em;
    top: 0;
    left:100%;
    height:400px;
    margin-left: 10px;
    width: 400px;
    border:5px;
    }
.service .desc p {
   opacity:0;
   transition: opacity 0.5s ease;
  }
.service:hover .desc p {
   opacity:1;
  }    
.service:hover img {
        display: block;
        opacity:0.5;
        filter:alpha(opacity=50);
  }
  </style>
     <title>My Site</title>
  </head>
  <body>
    <table width="1000" border="0">
      <tbody>
        <tr>
          <td width="60"> </td>
          <td width="575" class="Header">
            <div align="center">
              <h1>My Site</h1>
            </div>
          </td>
          <td width="227"><img width="100" height="101" align="right" alt="SU Logo" src="Bak/LOGO.GIF" /></td>
        </tr>
        <tr>
          <td rowspan="1" colspan="3">
              <ul class="buttons">
                <li class="service"><img src="Button1.jpg">
                  <div class="desc">
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Voluptatibus neque laudantium autem molestias dignissimos repellat
                        pariatur laboriosam necessitatibus sequi officia delectus harum aut
                        quidem *beep* similique blanditiis doloribus. Quisquam nostrum soluta
                        eligendi repellat repellendus numquam dicta voluptas accusamus
                        incidunt esse saepe totam optio sit laudantium eius in possimus
                        vitae dolores.</p>
                    </div>
                  <li class="service"> <img src="Button2.JPG">
                    <div class="desc">
                      <p>Lorem ipsum dolor sit amet.</p>
                    </div>
                  </li>
                  <li class="service"> <img src="Button3.jpg">
                    <div class="desc">
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi
                        placeat laborum facilis vitae minus.</p>
                    </div>
                  </li>
            </ul>
          </td>
        </tr>
        <tr>
          <td> </td>
          <td colspan="2"> </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 4 2016, 07:51 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,495
Joined: 9-August 06
Member No.: 6



My first thought was to position a box with default text so it's covered by the hover texts, but that won't work because of the opacity thing. The default text would shine through. You can't hide the default text on hover unless it's contained in the element you use hover with, so that's out too. Maybe there is a way with only CSS, but I can't think of one right now.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 4 2016, 09:17 PM
Post #3


.
********

Group: WDG Moderators
Posts: 8,275
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Mar 5 2016, 01:51 AM) *

You can't hide the default text on hover unless it's contained in the element you use hover with

With sibling selectors you can, at least if the default text is a sibling (or child of a sibling) of the hovered element:

CODE
li div {opacity: 0;}
li:hover div {opacity: 1;}
td:hover ~ td div {opacity: 0;}

<table>
<tr>
<td>
    <ul>
    <li><img src="dog.jpg" width="100" height="50" alt="Dog">
    <div>hovered content</div>
    </li>
    <li><img src="cat.jpg" width="100" height="50" alt="Cat">
    <div>hovered content</div>
    </li>
    </ul>
</td>
<td>
    <div>default content</div>
</td>
</tr>
</table>

But I don't know where in the HTML structure the OP wants the default text to appear.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 4 2016, 11:39 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,495
Joined: 9-August 06
Member No.: 6



That's smart! That could work.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Chitriguy
post Mar 14 2016, 04:18 PM
Post #5





Group: Members
Posts: 2
Joined: 4-March 16
Member No.: 24,041



Sorry I have been out of it for a while.

In the code that I posted originally I am looking to overlap the center sections. I have defined the default paragraph at the bottom as such:

CODE

          <td rowspan="1" colspan="3">
              <ul class="buttons">
                <li class="service"><img src="Button1.jpg">
                  <div class="desc">
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Voluptatibus neque laudantium autem molestias dignissimos repellat
                        pariatur laboriosam necessitatibus sequi officia delectus harum aut
                        quidem *beep* similique blanditiis doloribus. Quisquam nostrum soluta
                        eligendi repellat repellendus numquam dicta voluptas accusamus
                        incidunt esse saepe totam optio sit laudantium eius in possimus
                        vitae dolores.</p>
                    </div>
                  <li class="service"> <img src="Button2.JPG">
                    <div class="desc">
                      <p>Lorem ipsum dolor sit amet.</p>
                    </div>
                  </li>
                  <li class="service"> <img src="Button3.jpg">
                    <div class="desc">
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi
                        placeat laborum facilis vitae minus.</p>
                    </div>
                  <div class="nohover">
                      <p>This would be the default text that would show if the buttons were not being hovered.</p>
                    </div>
                  </li>
            </ul>
          </td>


So, within the table the buttons are in a column and the description is in a column and if someone isn't hovering over a button the default text would show. I apologize for not being more clear originally.

Thank you for looking at this I am a bit lost.

Much appreciated.

Tom
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 14 2016, 07:48 PM
Post #6


.
********

Group: WDG Moderators
Posts: 8,275
Joined: 10-August 06
Member No.: 7



Should div.nohover really be in the same LI as the last div.desc (or in the UL list at all)? If you instead put div.nohover after the UL list (as its sibling), you might use something like this:

CODE
.desc {
left: -1000em;
position: absolute;
}

.service:hover .desc {left: 200px;}
.buttons:hover ~ .nohover {display: none;}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 17th January 2020 - 12:10 PM