(Testing in Chrome)
In the below CSS, I'm trying to toggle the visibility of a P-tag when the mouse hovers over it. It's hidden but becomes visible on hover with a yellow highlight.
p {
visibility: hidden;
}
p:hover {
background-color: yellow;
text-decoration: overline;
visibility: visible;
}
But this isn't working; the P element is always hidden. I verified that if I remove the first definition, then the hover works, but I need to hide it most of the time.
I'd suggest toggling the opacity property instead.
p {
opacity: 0;
}
p:hover {
background-color: yellow;
text-decoration: overline;
opacity: 1;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam accumsan, orci ut posuere aliquet, libero erat vestibulum ligula, nec eleifend sapien nunc eu leo. Mauris ligula sapien, posuere eu ligula et, tincidunt pharetra velit. Pellentesque volutpat elit sed mollis lacinia. Donec nunc diam, viverra vel sapien non, dictum faucibus nibh. Donec dictum nec diam non sagittis. Quisque eget arcu et nunc lobortis accumsan vitae vel urna. Vivamus semper mollis auctor. Donec tempus, lectus quis maximus gravida, arcu lorem sollicitudin elit, nec sollicitudin sem neque a felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse vehicula, nibh vel euismod fringilla, mi lorem luctus dui, viverra efficitur diam sapien sit amet mi. Maecenas sed laoreet mauris. Nunc sodales, mi eu vulputate ullamcorper, ligula augue imperdiet massa, vitae fringilla tellus lorem id dui. In dapibus arcu nec felis porttitor varius.</p>
In doing so, the element will still consume the same amount of space when it isn't visible. In other words, the hidden text will continue to behave similarly to text hidden with visibility: hidden.
Related
This question already has answers here:
Underline several lines of text + underline to be full width + responsive
(1 answer)
Need to display multiline text with underlining lines of equal length
(5 answers)
Closed 10 months ago.
I'm making hexo blog theme. I'am trying to make line note like style. I want to make css on each line has underline(not like U tag)
want
But if I use border-bottom: 1px solid grey
real
You may also use a gradient to draw a grid below your text.
It has to match the line-height
Here an example with CSS var() to ease the tuning.
p, textarea {
--lineH: 1.6em;
line-height: var(--lineH);
padding:var(--lineH);
padding-block:0;/*reset to set first line right at top */
background:repeating-linear-gradient(to bottom, transparent 0 1.4em, gray 1.4em calc(1.4em + 2px), transparent calc(1.4em + 2px) 1.6em) 50% 0 / calc(100% - var(--lineH) * 2 ) 100% no-repeat ;
}
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<textarea placeholder="Type your texts here"></textarea>
Added a textarea to the example to show another possible use.
ressources if you need them
https://developer.mozilla.org/en-US/docs/web/css/gradient/repeating-linear-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/var
https://developer.mozilla.org/en-US/docs/Web/CSS/background
https://css-tricks.com/a-complete-guide-to-calc-in-css/
you can use more gradients to mimic a full note sheet https://codepen.io/gc-nomade/pen/bGLGNWB
You can use text-decoration: underline to get that effect (although the text-underline-offset style rule which is used to space the line from thee normal position is NOT supported in IE at all and some other browsers are a bit spotty with it). The only other way to do it is to split the content into spans and apply the border bottom or ::after pseudo-element to each span.
p {
font-size: 14px;
font-weight: 400;
line-height: 32px;
text-decoration: underline;
text-underline-offset: 4px;
}
<h2>Hello world<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed mauris a metus ultricies sagittis commodo sed tellus. Cras sodales nunc ut neque feugiat dignissim. Nullam ligula mauris, blandit eu dignissim at, rutrum vitae nisi. Proin facilisis massa vel elit fermentum, sit amet aliquam quam hendrerit. Aenean interdum nisi a metus consequat, vitae viverra ligula scelerisque. Sed in erat dictum, dapibus arcu quis, interdum orci. Suspendisse sit amet gravida purus, eu facilisis felis. Aliquam consectetur dapibus augue a suscipit. In semper pretium erat. Duis eget sollicitudin arcu, volutpat scelerisque est. Proin nisl nisi, tincidunt a justo id, lobortis tempor lacus. Quisque eu tincidunt ex.</p>
The p tag is a block element. Means if you assign a border the border would be assigned for the block. If you change p tag to an inline element then the border would be displayed like you want.
Update
with inside underlined words
p {
display: inline;
border-bottom: 1px solid grey;
}
p span {
text-decoration: underline;
color: red;
}
<h2>Hello world<h2>
<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing</span> elit. Duis sed mauris a metus ultricies sagittis commodo sed tellus. Cras sodales nunc ut neque feugiat dignissim. Nullam ligula mauris, blandit eu dignissim at, rutrum vitae nisi. Proin facilisis massa vel elit fermentum, sit amet aliquam quam hendrerit. Aenean interdum nisi a metus consequat, vitae viverra ligula scelerisque. Sed in erat dictum, dapibus arcu quis, interdum orci. Suspendisse sit amet gravida purus, eu facilisis felis. Aliquam consectetur dapibus augue a suscipit. In semper pretium erat. Duis eget sollicitudin arcu, volutpat scelerisque est. Proin nisl nisi, tincidunt a justo id, lobortis tempor lacus. Quisque eu tincidunt ex.</p>
p {
display: inline;
border-bottom: 1px solid grey;
}
<h2>Hello world<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed mauris a metus ultricies sagittis commodo sed tellus. Cras sodales nunc ut neque feugiat dignissim. Nullam ligula mauris, blandit eu dignissim at, rutrum vitae nisi. Proin facilisis massa vel elit fermentum, sit amet aliquam quam hendrerit. Aenean interdum nisi a metus consequat, vitae viverra ligula scelerisque. Sed in erat dictum, dapibus arcu quis, interdum orci. Suspendisse sit amet gravida purus, eu facilisis felis. Aliquam consectetur dapibus augue a suscipit. In semper pretium erat. Duis eget sollicitudin arcu, volutpat scelerisque est. Proin nisl nisi, tincidunt a justo id, lobortis tempor lacus. Quisque eu tincidunt ex.</p>
try this :
text-decoration: underline;
text-underline-offset:6px;
Have you tried using the text-decoration-line property.
text-decoration-line: underline;
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-decoration-line
The overflow property didn't hide my overflown content which overflows the width of the element.
HTML
<section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed feugiat lacus. Morbi auctor, nibh vitae scelerisque cursus, nisl purus imperdiet lacus, quis porttitor ante mauris eget tortor. Vestibulum id molestie dui. Nullam sit amet ultrices ante. Nulla venenatis pellentesque mi, vel condimentum orci facilisis pellentesque. Aenean a enim ac dui tempus ornare eget nec nisl. In facilisis varius ullamcorper. Aliquam magna erat, pellentesque ut arcu et, accumsan placerat urna. Vestibulum porta justo ut laoreet dapibus.
Etiam dictum semper dolor, in laoreet turpis aliquam eget. Aliquam pulvinar sem lectus, vitae hendrerit libero pellentesque eu. Duis nec tincidunt felis, sed feugiat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed feugiat lacus. Morbi auctor, nibh vitae scelerisque cursus, nisl purus imperdiet lacus, quis porttitor ante mauris eget tortor. Vestibulum id molestie dui. Nullam sit amet ultrices ante. Nulla venenatis pellentesque mi, vel condimentum orci facilisis pellentesque. Aenean a enim ac dui tempus ornare eget nec nisl. In facilisis varius ullamcorper. Aliquam magna erat, pellentesque ut arcu et, accumsan placerat urna. Vestibulum porta justo ut laoreet dapibus.
Etiam dictum semper dolor, in laoreet turpis aliquam eget. Aliquam pulvinar sem lectus, vitae hendrerit libero pellentesque eu. Duis nec tincidunt felis, sed feugiat.</p></section>
CSS
*, *::after, *::before {
box-sizing: border-box;
}
html, body, div, p{
margin: 0;
padding: 0;
}
section{
width: 50%;
background-color: pink;
height: 150px;
}
p{
font-size: 1em;
color: blue;
overflow: hidden;
}
Codepen :: https://codepen.io/StinsonTheNoob/pen/oNbxjWx
If your goal is to not let the <p> start on a new line and rather not overflow, you need to set overflow:hidden to your <section>.
If you want the text to disappear if it exceeds the first line on the right side of the tag then put overflow: hidden; to its parent container which, in your case is the ...
But if you want that text remains inside the container only then you have to make the tag and the "font-size" responsive so that it adapts according to the width and then will not overflow!!!
If you simply don't want any scrolling of the page then kindly put overflow in html or body's CSS commands....
I've been trying to get this text underline transition to work: https://codepen.io/shshaw/pen/pdyJBW
a, .strike {
color: #FF5151;
text-decoration: none;
display: inline;
background-image: linear-gradient(to bottom, transparent 20%, currentColor 21%);
background-position: 0 1em;
background-repeat: no-repeat;
background-size: 0% 6px;
transition: background-size 0.5s ease-in-out 0.2s;
}
a:hover,
a:focus {
background-size: 100% 6px;
transition-delay: 0s;
}
.strike {
color: #307672;
background-size: 0% 2px;
background-position: 0 0.5em; /*1em;*/
}
.strike:hover,
.strike:focus {
background-size: 100% 2px;
transition-delay: 0s;
}
html {
background: #000249;
color: #FFF;
font-size: 62.5%;
display: flex;
height: 100%;
}
body {
font-size: 1.6rem;
line-height: 1.4;
max-width: 30em;
width: 90%;
margin: auto;
background: inherit;
-webkit-font-smoothing: antialiased;
font-smoothing: always;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. Mauris vehicula cursus risus id luctus. Curabitur accumsan venenatis nibh, non egestas ipsum vulputate ac. Vivamus consectetur dolor sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis suscipit vestibulum. Nullam luctus pellentesque risus in ullamcorper. Nam neque nunc, mattis vitae ornare ut, feugiat a erat. Ut tempus iaculis augue vel pellentesque.</p>
<p>Vestibulum nunc massa, gravida quis porta nec, feugiat id metus. Strike me! Nunc ac arcu dolor, quis vestibulum leo. Cras viverra mollis ipsum, non rhoncus lectus aliquam et. Morbi faucibus purus sit amet lacus aliquet elementum. Donec sit amet posuere enim. Cras in eros id tortor fringilla ultricies. Mauris faucibus ullamcorper velit, pulvinar varius odio eleifend eu. Quisque id odio metus. Morbi adipiscing ultricies posuere. Pellentesque elementum porttitor eros in molestie. Maecenas ut leo quis nisi tempor tincidunt.</p>
<p>Donec nunc ligula, vulputate quis mollis eu, interdum quis libero. Donec nulla ante, facilisis sit amet vulputate at, tincidunt a velit. Maecenas vestibulum, nulla sed tincidunt viverra, lorem turpis aliquam urna, ut pretium orci purus consequat augue. Etiam a enim orci, vitae pulvinar odio. In elit urna, tincidunt a pellentesque et, scelerisque at nibh. Sed nec est sapien. Aliquam ullamcorper eros eu quam ultrices vel faucibus eros interdum. Etiam mattis eleifend sapien, eu iaculis massa feugiat sed. Aliquam erat volutpat. Vivamus facilisis ultricies eros, a pretium purus mollis id. Sed dapibus elit ut neque rutrum dignissim. Nulla eros nisl, venenatis quis rhoncus sit amet, molestie nec nisl. Pellentesque vel neque sapien, et sagittis nulla.</p>
<p>Aliquam eu iaculis mauris. Etiam arcu lectus, imperdiet sit amet volutpat vitae, commodo sed nibh. Fusce faucibus tempor cursus. Donec ut ligula tortor. Maecenas malesuada, diam vitae pharetra dictum, erat ante iaculis risus, sed sollicitudin nisl nisl vel metus. Nulla libero augue, convallis nec luctus id, iaculis nec urna. Cras vitae mi ut augue ultricies tempus.</p>
And I've got it working in all major browsers except IE11. I've seen this SO question (Background size animation not working in IE11 or Ipad) where the accepted answer says: "Internet Explorer 11's set of animatable CSS properties is the same like they've started in IE 10 with, and background-size is not among those animatable ones."
That answer also links here: https://www.w3schools.com/cssref/css_animatable.asp
Which lists the animatable properties, and lists background-size as one of those animatable properties, but when I try to run their example (https://www.w3schools.com/cssref/tryit.asp?filename=trycss_anim_background-size) in IE11, it doesn't work.
I can't seem to find any documentation that explicitly lists the animatable properties in IE11, so is background-size simply not animatable in IE11, and is there any documentation that says so?
Hi I want to make vertical scrolling invisible, but i want to left the horizontal scrollbar visible.
Also I want my page be scrollable both vertically and horizontally.
I used:
.my_class::-webkit-scrollbar{
display: none;
}
but it make both scrollbar invisible.
overflow-y: hidden; // hide vertical
overflow-x: hidden; // hide horizontal
These two CSS properties can be used to hide the scrollbars.
I have to say that using simple css trick, you wont be able to achieve this.
I suggest you d use custom scrollbar plugins, by which you can simply apply css trick for each scrollbar type, like following:
$(document).ready(function() {
$(".container").customScrollbar();
});
.container {
max-width: 300px;
max-height: 100px;
}
.container .overview {
width: 800px;
}
.scrollable .scroll-bar.horizontal {
background: #eee; height: 5px; border-radius: 20px;
}
.scrollable .scroll-bar.horizontal .thumb {
background: #999;
border-radius: 20px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/mzubala/jquery-custom-scrollbar/master/jquery.custom-scrollbar.css" />
<script src="https://rawgit.com/mzubala/jquery-custom-scrollbar/master/jquery.custom-scrollbar.js"></script>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.
</div>
Use over flow property :
overflow-y: hidden
In Chrome (I am using version 16.0.912.75 m on Win 7) I find that no matter what I have a cursor set as, as soon as I hold my left mouse button down and move the cursor then the cursor type is changed to text (even when there is no text anywhere on the page).
Is this a bug? Does anyone know how to get around it as it is making my drag and drop tool look a bit silly!
div {
background-color: lime;
height: 100px;
width: 300px;
cursor: wait;
}
<div></div>
Original JSFiddle: http://jsfiddle.net/KJfbs/
Edit
As answered by #davgothic below, adding -webkit-user-select: none; will fix the issue when there is no text. However, should we position the element absolutely and place text behind it then the problem persists.
div {
background-color: lime;
height: 100px;
width: 300px;
cursor: wait;
-webkit-user-select: none;
position: absolute;
top: 0;
left: 0;
}
<div></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis eros mi, non tristique diam. Cras auctor posuere urna, porta egestas metus sollicitudin at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer id arcu quis ipsum feugiat consequat id sit amet velit. Vivamus at quam quis lacus pellentesque egestas eu sed nulla. Vestibulum arcu augue, ultrices quis lobortis vehicula, molestie ut velit. Donec egestas lacus id diam euismod a lacinia lorem ultrices.
Vivamus non mi nunc. Pellentesque vitae sodales magna. In ac urna tortor. Quisque mattis mollis magna ultricies pellentesque. Mauris sed lorem eget sem imperdiet volutpat. Fusce fringilla pretium enim, eu ultricies justo fringilla in. Aliquam ac dui risus, ut eleifend tellus.
Nulla facilisi. Fusce nec leo lectus, in porttitor est. Etiam in posuere tellus. Maecenas viverra nibh et odio aliquam at aliquet arcu ultricies. Aliquam in arcu ac mi mollis ultricies vitae dapibus risus. Integer a arcu eu ipsum fermentum dignissim a vitae nunc. Pellentesque consectetur rutrum metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi semper dapibus nunc. Mauris congue est sit amet neque condimentum nec fermentum massa sagittis. In bibendum cursus tortor quis scelerisque. Mauris est nisi, elementum eu scelerisque vel, placerat quis erat. Nam malesuada massa quis sem eleifend tempor eget ut erat.
Etiam egestas ligula nec odio molestie placerat. Donec nunc dolor, venenatis id iaculis vel, dapibus quis justo. Suspendisse sed nunc eget nunc luctus hendrerit eget at tortor. Quisque consectetur, eros eget dictum lobortis, erat nisl eleifend metus, egestas vulputate purus urna ut arcu. Nunc mollis tempor mi, quis commodo diam semper id. Nulla sed urna sit amet tellus consequat elementum. Maecenas cursus ipsum sit amet nunc laoreet quis placerat urna tempor. Maecenas tristique sodales posuere. Mauris scelerisque ornare tincidunt. Nulla tempus gravida orci, vel lacinia ante placerat ac. Donec gravida erat vitae elit suscipit ac ullamcorper lacus faucibus.
Aenean dictum elit eu nunc varius suscipit. Praesent ultrices, nunc ullamcorper posuere consectetur, purus ipsum dictum nisl, ultrices rhoncus nisl mauris sit amet dui. Donec convallis arcu eu nibh laoreet pulvinar. Sed euismod volutpat nibh eget faucibus. Maecenas interdum dapibus consequat. Sed sit amet leo lectus, euismod molestie nunc. Donec dui tellus, dignissim ut luctus non, facilisis eu magna. Phasellus a neque et dui luctus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat mollis dui, eget varius nunc gravida eu. Vivamus nibh erat, dapibus eu mattis blandit, sodales ut nisi. Vivamus pellentesque congue placerat. Pellentesque ultricies turpis vel odio imperdiet et facilisis leo viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
Original JSFiddle: http://jsfiddle.net/KJfbs/2/
Try adding -webkit-user-select: none; to the CSS for that element to prevent text selection.
Example: http://jsfiddle.net/KJfbs/1/
Personally I would also add these...
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
...for cross browser compatibility.
I think that with -webkit-user-select: none; the problem persists if you put anything else in the page. For instance: http://jsfiddle.net/KJfbs/237/
Anyway I think jQuery preventDefault solves the problem in any case:
http://jsfiddle.net/KJfbs/241/
preventDefault avoids the default behavior that is change to cursor text.
Then I can control and put any cursor I want: $(this).css("cursor","wait");
JQUERY:
$(function(){
$('#lime').mousedown(function(e) {
e.preventDefault();
$(this).css("cursor","wait");
}).on('mouseup mouseleave', function() {
$(this).css("cursor","default");
});
});
HTML:
<div id="lime"></div>
<p>Lorem ipsum dolor sit amet</p>
CSS:
#lime {
background-color: lime;
height: 100px; width: 300px;
cursor: wait;
position: absolute;
top: 0; left: 0;
}