javascript - Advanced sibling selector -


this question has answer here:

i can't quite head around this. have following construct:

<div class="container">      n = 0 ...          <a href="some url">link n</a>      endfor       each link in ".container"           <div class="poptip"></div>      endfor </div>

and example be:

<div class="container">      <a href="some url">link 1</a>      <a href="some url">link 2</a>      <a href="some url">link 3</a>       <div class="poptip">some content related link 1 retreived ajax</div>      <div class="poptip">...</div>      <div class="poptip">...</div> </div>

now hurdle, trying show .poptip on hover on anchor tag, , works fine if there 1 link (which case). in case there's >1 link, last 1 work. current css (sass style) doesn't quite work in >1 cases:

.producttooltip {   position: relative; } .producttooltip a:hover + div {   display: block; }

i cannot change structure of html, container > links followed poptips. can mark poptips , anchor tags unique identifiers e.g. <a href="some url" rel="identifier">link 1</a><div class="poptip" rel="identifier"></div>, can't quite figure out if in css can create general selector goes (pseudo):

a:hover + div[rel=a.rel] {     display: block }

so question is, can construct marked in pure css, or have use js trickery (which can, prefer css). hope 1 of guys more clever me.

edit: just gonna clarify - cannot change structure of html. neatest solution wrap each element it's equivalent poptip, entire conundrum fact cannot this.

in case, can way:

$('a').on('hover', function() {   $('.poptip').eq($(this).index()).show(); }, function() {   $('.poptip:visible').hide(); });

it tough css alone. then, have provided css solution below. have if wanna consider css solution.

you can via css itself. although there lot of plugins, lets this. first, need hovering element, in case, link.

<a href="#">hover me!</a>

next should tool tip. can have <span> , put inside link.

<a href="#">hover me!<span class="tooltip">hello, world!</span></a>

now comes real css part.

a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;} {position: relative;} a:hover span {display: block; text-align: center;}

snippet

a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;}  {position: relative;}  a:hover span {display: block; text-align: center;}
<a href="#">hover me!<span class="tooltip">hello, world!</span></a>

this 1 of pure css solution. can see working fiddle here.

however, there lot of plugins, keep concept base , work hover-cards , tool tips. examples include:


-

Comments

Post a Comment

Popular posts from this blog

c# - Binding a comma separated list to a List<int> in asp.net web api -

the default binder in web api expecst http://url.com/webapi/report/?pageids=3243&pageids=2365 to bind public ihttpactionresult report(list<int> pageids){ // exciting webapi code} i wish bind http://url.com/webapi/report/?pageids=3243,2365 as running out of space in url get . i have created class public class commaseparatedmodelbinder : system.web.http.modelbinding.imodelbinder { public bool bindmodel(httpactioncontext actioncontext, modelbindingcontext bindingcontext) { //binding in here } } and registered in webapiconfig.cs var provider = new simplemodelbinderprovider( typeof(list<int>), new commaseparatedmodelbinder()); config.services.insert(typeof(modelbinderprovider), 0, provider); i have altered method signature use model binder so public ihttpactionresult report( [modelbinder] list<int> pageids){ // exciting webapi code} however break point in binder not being
Read more

Delphi 7 and decode UTF-8 base64 -

in delphi 7, have widestring encoded base64(that received web service widestring result) : pd94bwwgdmvyc2lvbj0ims4wij8+dqo8c3ryaw5nptiq2lpyqjwvc3ryaw5npg== when decoded it, result not utf-8: <?xml version="1.0"?> <string>طھط³طھ</string> but when decoded base64decode.org, result true : <?xml version="1.0"?> <string>تست</string> i have use encddecd unit decodestring function. the problem have using decodestring . function, in delphi 7, treats decoded binary data being ansi encoded. , problem text utf-8 encoded. to continue encddecd unit have couple of options. can switch decodestream . instance, code produce utf-8 encoded text file data: {$apptype console} uses classes, encddecd; const data = 'pd94bwwgdmvyc2lvbj0ims4wij8+dqo8c3ryaw5nptiq2lpyqjwvc3ryaw5npg=='; var input: tstringstream; output: tfilestream; begin input := tstringstream.create(data); try output := tfilestream.
Read more

html - Is there any way to exclude a single element from the style? (Bootstrap) -

so, have img logo, overlaid on div styled background-image: url("...") , , both elements inside 2 div classes .to-color , .to-overlay respectively, black transparent overlay. is there way exclude logo style given these 2 classes? here's jsfiddle example: link html , css example: - html - <div class="to-color"> <div class="to-overlay"> <div class="respo"> <div class="row"> <div class="col-xs-4 col-xs-offset-4 text-center"> <img src="http://ansonalex.com/wp-content/uploads/2011/06/google-logo-768x260.png" alt="..." class="img-responsive"> </div> </div> </div> </div> </div> - css - .to-color { background-color: #000; } .to-overlay { opacity : 0.5; } .respo { background-image: url("https://source.unsplash.com/category/objects/1600x900"); background-position: center center;
Read more