Member Avatar for chrisschristou

hello firends
i have more tha 30 div block as list of product it containt like this

<div class="itemlist" id="itemlist">
        <ul>
          <li><img src="cover/imshge.jpg"</li>
          <li class="iteminfo" id="iteminfo"><"item desciption"></li>
          <li> <?php echo ['price']; ?></li>
        </ul>
      </div>

and i want to description can have 4 or 5 line of text but i want to hide it it show only 2 line but when mouse hover the div itemlist it must have a thin border and show the rest of iteminfo.

#itemlist {
    clear: none;
    float: left;
    margin-left: 2.8698%;
    margin-bottom:2.8698%;
    padding-top:2.8698%;
    width: 26.8040%;
    display: block;
}

please check the exemple of realy what i want here http://www.aliexpress.com/w/wholesale-jiake-v8.html?g=y&SearchText=jiake%2Bv8&CatId=0&initiative_id=SB_20131218055218

Edited by chrisschristou because: i add i link of exemple of realy what i want do
  • 4 Contributors
  • 6 Replies
  • 469 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by iamthwee
Member Avatar for iamthwee

Looks to me like it is working... Am I missing something?

Member Avatar for JorgeM

Am I missing something?

He was providing an example of what he wants to do. It seems to me he's looking for guidance on how to incorporate that less..more functionaility into the code example that he pasted above.

Member Avatar for Dervish1

I would think it's a matter of putting some code into the mouseover to modify the contents of the div. This forces a redraw, of course, which might be a bit ugly if you have a large grid that has to be redone.

Alternately, you might try assigning each item a tooltip with the full info you want.

Member Avatar for chrisschristou

tried by my self but div don't make border the when i hover on first item of list it make some trouble
here is the what i do www.zunaphone.com/accesory
all that list have same class name and id this is the code css

#itemlist {
    clear: none;
    float: left;
    margin-left: 2.8698%;
    margin-bottom:2.8698%;
    padding-top:2.8698%;
    width: 26.8040%;
    display: block;
}
.itemlist:hover {
    border: 2% solid  #CCC;
    }
    .iteminfo{
    overflow-y: hidden;
    height: 50px;
}

please view ebay product list with gallery view and hove mouse on to understund what i mean what i relay want to do : http://www.ebay.com/sch/Cell-Phones-Smartphones-/9355/i.html?rt=nc&_dmd=2

Edited by chrisschristou because: a link of exemple
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.