I have a list of products with icons for contents. When hovering an icon a text explains the meaning of the image.
Because on touchscreens hover doesn't exist, I use :active, too.
My solution works perfect
- on desktop (hovering shows text, moving mouse away: text disappears)
- and on normal phones (touch shows text, touching somewhere else: text disappears
but not on Iphones: touch shows text, but it stays even when touching somewhere else (except when touching another "hoverable" image)
HTML:
<span class="canhover">
<img class="icon24" src="img/allergens/gluten.jpg">
<span class="hovertxt">
contains gluten
</span>
</span>
<span class="canhover">
<img class="icon24" src="img/allergens/milk.jpg">
<span class="hovertxt">
conains milk
</span>
</span>
...
CSS:
.canhover {
position: relative;
}
.canhover:hover .hovertxt, .canhover:active .hovertxt {
display: block;
}
.hovertxt {
display: none;
position: absolute; bottom: 2em; left: 0;
}
How can I achieve that the text also disappears on I phones when toching somewhere else?
Try to add :focus with :hover & :active like this :
.canhover:hover .hovertxt,
.canhover:focus .hovertxt,
.canhover:active .hovertxt{
display: block;
}
and in safari browser use safari prefix
Related
In my code, I have a 2 lined text. I want to move the second text (nth-child(3): 10 x apples) to the line below when the width of the screen changes. I have tried display:block and white-space:pre. But it didn't work and the sentence did not move to next line. My code and a screenshot is below. What should I do to achieve this?
#media (min-width: breakpoint-max(sm)) {
.fruit-detail {
& :nth-child(3) {
display: block;
}
}
}
<div class="fruit-detail">
<span class="day-one ng-star-inserted">
"Yesterday"
</span>
<span class="ng-star-inserted">
Today
</span>
<span> 10 x </span>
<span>Apples</span>
</div>
You could wrap "10 x Apples" around a parent container and give it:
.parentContainer::after{
content: "\a";
white-space: pre;
}
Don't know if it works tho, though I don't have sass installed.
This is just a suggestion because it worked for me :).
You can toggle the visibility for a break tag by providing a class to it and setting display:none; to it in your main css and display: block in your matching media query.
Refer to this for a practical example : https://codepen.io/darshiljani/pen/QWxdqpz
You are selecting the third .fruit-detail.
I don't think you can use display:block here because "10x" and "Apples" won't be side by side.
You can select the second span and add a line break with :after (or the third with :before)
.fruit-detail:nth-child(3) {
background-color: orange;
}
.fruit-detail span:nth-child(2):after {
content: "\a";
white-space: pre;
}
<div class="fruit-detail">
<span>"Yesterday"</span>
<span>Today</span>
<span> 10 x </span>
<span>Apples</span>
</div>
<div class="fruit-detail">
<span>"Yesterday"</span>
<span>Today</span>
<span> 10 x </span>
<span>Strawberries</span>
</div>
<div class="fruit-detail">
<span>"Yesterday"</span>
<span>Today</span>
<span> 10 x </span>
<span>Bananas</span>
</div>
This question has a Stackblitz demo; Given the following Angular Material button
<button md-button>
<span>Foo</span>
<md-icon>keyboard_arrow_down</md-icon>
</button>
How can I increase the gap between Foo and the icon (see below):
I thought this would be easy but Angular Material wraps the contents in <span class="mat-button-wrapper"> so the final markup is more like:
<button>
<span class="mat-button-wrapper">
<span>Foo</span>
<mat-icon>keyboard_arrow_down</mat-icon>
</span>
</button>
So far I've got as far as adding the following CSS to make the wrapper fill the available space but I can't see how to progress:
.mat-button-wrapper {
display: inline-block;
width: 100%;
}
.mat-button-wrapper > span {
margin-right: 2em;
}
Stackblitz :-
https://stackblitz.com/edit/angular-material-6z4j4m
button md-icon {
margin-left: 64px;
}
This is more semantically appropriate.
https://stackblitz.com/edit/angular-material-yvqvhm
I want to add an anchor symbol to my url when mouse hover in angular. Here is my code,
<a ng-click="download(File)"><img src="images/filePic.png"/>{{filename}}</a>
Like this maybe
⚓ {{filename}}
<a ng-click="download(File)">⚓ <img src="images/filePic.png"/>{{filename}}</a>
Update using CSS hover
a:hover:after {
content: ' \2693'
}
<a ng-click="download(File)"><img src="http://placehold.it/15x15"/> some filename</a>
Update 2 using CSS hover cursor
a:hover {
cursor: url('https://onedrive.live.com/download?resid=EC849DFEDB797EB9!1066&authkey=!AEmDTZM6b8_Ies0&ithint=file%2ccur'),auto;
}
<a ng-click="download(File)"><img src="http://placehold.it/15x15"/> some filename</a>
<br><br>
Note there is a small delay (first time hovering) from OneDrive before the anchor shows
i add an icon next to a div whose contenteditable property is set to true. Until i add this icon, contenteditable was working perfectly (i was able to edit and cursor was placed to end of the entry upon pressing end key). But with addition of this icon, i am still able to edit the value but the cursor is not placed at end of entry upon pressing end key. Any idea what i might be doing wrong here.
<ul>
<li>
<div name="value" class="divinline" contenteditable="true">Test1</div>
<a class="removelink" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">
<img src="/../images/remove_grey.png" alt="X" ></a>
</li>
</ul>
CSS
.divinline {
display: inline;
}
a.removelink {
float: none !important;
border: medium none !important;
display: inline !important;
}
OK, I added a universal style to my main.css that says:
a:active {
top:1px;
position:relative;
}
This gives me a nice little "nudge" effect when anything is clicked. Consequently, I had to go around to all of my absolutely positioned <a> elements and fix them from jumping up to top:1px and manually give them the proper nudge.
Although I have run into this one case that has thrown me for a loop on a couple levels. I think I got the positioning all sorted out, but what's happening when I click the anchor is that the <span> element that comes next in the containing <li> disappears while the anchor is being clicked.
I did try setting the <span> to float:left but instead of disappearing it just began lining up beside the anchor and hanging outside the containing <li>.
Here's the page: http://beta.helpcurenow.org/media/videos/
What I'm referring to on this page are the thumbnails that sit below the main video window. There are thumbnail feeds from vimeo with a video screenshot and the meta data. The video screen shot has a hidden span in the anchor so that when you hover over the thumbnail it appears. This is what is causing the meta data to disappear when clicked.
And if you'd like to just see the markup here, it is below:
<ul id="video-gallery">
<li>
<a class="video-thumbnail" href="#">
<img src="http://ats.vimeo.com/775/137/77513796_200.jpg" alt="Amy Fann Interview"/>
<span class="play-arrow"></span>
</a>
<span class="video-metadata" id="video-13466402">
<span class="video-title">Amy Fann Interview</span>
<span class="video-likes meta">Likes <span class="value">0</span></span>
<span class="video-views meta">Views <span class="value">2</span></span>
<span class="video-duration meta">Duration <span class="value">01:48</span></span>
<span class="video-post-date meta">Posted 1 day and 7 hours ago</span>
<span class="video-url hidden-data">http://vimeo.com/13466402</span>
<span class="video-description hidden-data">Amy Fann talks about her upcoming trip to Zambia as part of a CURE GO Team.</span>
</span>
</li>
</ul>
And the CSS...(obviously there are several other style rules for this section, but I'm going to try to include only the relevant ones)
li a.video-thumbnail span.play-arrow {
display:none;
}
li:hover a.video-thumbnail span.play-arrow {
display:block;
width:122px;
height:86px;
background:url(/img/media/play-arrow.png) no-repeat center top;
position:absolute;
top:40px;
left:50px;
}
li:hover a.video-thumbnail:active span.play-arrow {
position:absolute;
top:30px;
left:40px
}
li a.video-thumbnail:active {
position:absolute;
top:auto;
}
li.added-video {
display: none;
}
This CSS should fix your problem (at least it did for me in firebug):
li a.video-thumbnail:active {
position: static;
}
li:hover a.video-thumbnail:active span.play-arrow {
top: 40px;
left: 50px;
}
I don't know exactly why your meta was being hidden on :active, but the above prevents the position type of the thumbnail link from changing and keeps everything in place.