I have in a web-page repeated divs which are normally transparent, but are made opaque when the mouse hovers over their parent:
<div class="entry">
...
<div class="info">
some information text
</div>
</div>
div.info {
opacity: 0;
}
.entry:hover div.info {
opacity: 1;
}
I would now like to make that page searchable through the standard browser "find in page" functionality. That actually works, but if the found text is within such a div.info, it is obviously invisible, too.
Is there a way I can make my div visible not just on hover, but also if it contains found text? Or specify the style of found text, including that is is supposed to be visible?
I looked at the other CSS pseudo-classes, but none of them match my purpose. I also experimented with the pseudo-element ::target-text as an alternative to found text.
Do I have to do this via JavaScript?
Related
Only HTML/CSS solutions please
I'm working on an online art portfolio. On each page are a number of paintings, organized vertically. Pretty simple.
However, when the cursor hovers over each painting, I want some text to show, either causing the painting to fade a little bit, or the text can appear in a small text box that follows the cursor.
I would post the code I have now, but after much trial and error, I've stripped it back down to simply a div with the img inside of it.
You'll want to do some selector magic. See attached snippet and CodePen.
Next time, please post some of your attempted solutions. No one wants to just write your code for you.
img.fade:hover /* fade out on hover */ {
opacity:0.5;
}
img.fade + span /* hide spans immediately after images that are set to fade */ {
visibility:hidden;
}
img.fade:hover + span /* display spans immediately after :hover faded images */ {
visibility: visible;
}
<img class="fade" src="http://41.media.tumblr.com/d4473a971038c392b3e4ecb42e013784/tumblr_nlyfpjetVZ1tdg8rso7_500.jpg">
<span>Here is some Text</span>
See CodePen http://codepen.io/anon/pen/PPPqvM
I want to:
be able to style some text on my HTML page so that a certain background color only covers the text and not beyond it.
Ideally I would like to control this from one div.
Here is my jsfiddle of the below:
#edit_this_div {
min-width: 0px;
background-color: yellow;
}
#bad_way {
background-color: yellow;
display: inline-block
}
<div id="edit_this_div">Please edit this div to there isn't extra yellow background without manually setting the width.</div>
<br>
<div id="bad_way">This is the inefficient and manual way.</div>
What I tried:
The way I thought of accomplishing this is to set the div as an inline block, which I've also shown in my jsfiddle. However, I rather not do this because I feel it would complicate things; when I did this my block started jumping around and combining with other elements. I don't plan to have any other elements with the div so I am fine with it staying as a block that takes up the whole line on the screen.
With the display of block, I also tried setting the padding and minimum widths but it doesn't have an effect laterally for removing the extra color that spills past the text.
It is generally recommended that you put text into appropriate block tags, i.e. <p>...</p>, <h1>...</h1>, <blockquote>...</blockquote>, etc.
If you did that, it would be easy, for example:
<div id="edit_this_div">
<p>Please edit this div to there isn't extra yellow background without manually setting the width.</p>
</div>
Then the CSS:
#edit_this_div p {
background-color: yellow;
display: inline;
}
Even cleaner would be to use both <p>-tags as well as additional inline tags, for example <span>-tags:
<div id="edit_this_div">
<p><span>Please edit this div to there isn't extra yellow background without manually setting the width.</span></p>
</div>
CSS:
#edit_this_div p span {
background-color: yellow;
display: inline;
}
What you need is <mark></mark> tag, like this:
<p>Do not forget to buy <mark>milk</mark> today.</p>
Here's a fiddle for you:
http://jsfiddle.net/am9rzfmd/
The default css settings for this tag are:
mark {
background-color: yellow;
color: black;
}
So you don't have to explicitly define the css, only just in case you need to change the color.
Update
As misterManSam pointed out:
Be aware that the element has a special semantic meaning and
shouldn't be used if you just want "to make my text a yellow
background"
Change it from a div to a span and it will only stretch its width to the contents within it.
<body>
<span id="edit_this_div">Please edit this div to there isn't extra yellow background without manually setting the width.</span>
<br>
<br>
<span id="bad_way">This is the inefficient and manual way.</span>
</body>
http://jsfiddle.net/bbv5ryhk/
I have a page which has some data in form of tables
Currently, for one of the columns(which is a link) I need to display a text on hover and was able to do it successfully by giving the title in the tag. Now , I tried applying css to the text on hover and following is the snippet
CSS
a.changes:hover {text-decoration: none; }
a.changes p {position: absolute; left: -9999px;border-style:solid; border-color:black; border-width:1px;}
a.changes:hover p {left: 5%; background: #ffffff; size:1px;}
and in the html, I removed the title from the a tag and gave it in inside tag
<a href='#' class='changes' onclick='AAA'><font color=blue>XYZ</font><p style='width:100px;'>TextToBeDisplayedOnHover</p></a>";
The above snippet works fine on the current display. But when I scroll down the page and then try to display to text on hover by selecting the last element, then the title is not getting displayed at well. My guess the text on hover has gone beyond the display page vertically.
Someone please help me in this. I need this hover to work for all the rows in the table in the current page as well as the next pages and not just the current display alone as happens in my case
Thanks in advance.
I don't quite understand your problem but you have 100 pixels wide container so the "TextToBeDisplayedOnHover" doesn't fit into the container. You could try this (or widen the container):
a.changes:hover p {left: 5%; background: #ffffff; size:1px;width:100px;overflow:scroll;}
Lose the inline styles in the hovering ´p´. (You're using CSS already.)
<a href='#' class='changes' onclick='AAA'>XYZ<p>TextToBeDisplayedOnHover</p></a>
If you use spaces in the hovering text ("Text To Be Displayed On Hover") you'll be less likely to run out of space.
If blue isn't the the default font color, add this to your styles:
a {color:blue;}
I used to have the following structure to hold a logo with a link inside a div:
<a href="http://mysite.com">
<div class="logo"></div>
</a>
with the following CSS:
.logo {
float: left;
width: 120px;
height: 24px;
background: url('logo.png') no-repeat;
}
Is it wrong or there's any problem with compatibility if I remove the DIV and apply the 'logo' class directly to the A element? Just like this:
No, nothing wrong with it. It's actually better to do it that way, less redundant markup.
Some other things to note:
It's actually not valid for doctype other than HTML5 to put a block element (in this case, the div) inside an <a>
You should put a text inside the <a> for SEO/screen reader purpose and hide the text using text-indent:-999px and overflow:hidden. display:block is unnecessary as float:left implicitly sets it.
There is nothing wrong in doing this. You will need to add display:block for dimensions to apply to a non block level element, but as for how the site is read and crawled, no it will not hurt you.
You can make img a block element using this:
.logo {
float: left;
width: 120px;
height: 24px;
background: url('logo.png') no-repeat;
display:block;
}
And as the others are saying it is safe to use an a-tag with a background but normally i have the logo in a div and an anchor on top. Good luck ; )
It creates a major accessibility problem and is in direct violation of Guideline 1.1 of the modern accessibility guidelines, WCAG 2.0: “Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.” The content of the a element is empty, and a background image is displayed, when CSS is enabled and image loading is enabled; but there is no text alternative.
And you cannot specify a text alternative for a background image. Use a content image instead:
<img src="logo.png" alt="ACME">
Here “ACME” is to be replaced by a descriptive name or abbreviation for the linked page.
By default, an image that is a link has a colored border, with the same color as link texts. You can remove it by using border="0" in the img tag or a img { border: none } in CSS.
The website I am working on uses an image defined in CSS as the main logo. The html code looks like this:
<h1>Something.com | The best something ever</h1>
I would like to display just the image defined in CSS and pass the information from the h1 tag to the search enginges only.
What's the correct way to do this? Google is very strict about this, I know that display:none is wrong, what about visibility: hidden ?
Thanks in advance!
You should be fine with visibility: hidden.
That said, if your image is part of the content (and I would dare to say that a company logo is content, not presentation), and you care about accessible html, you should consider changing your code to include the image as a img element with title and alternate text, instead of a css background-image.
Additionally, if you hope to attract search engines to the keywords inside the <h1> element, you might want to include those words more than once in the page. The page title is a much more relevant place than the h1 element, for example.
The easiest, foolproof, best for SEO solution would be
<h1><img src=logo.png alt="Something.com | The best something ever"></h1>
set the image as the background of your h1 (set the width/height so it fits) then set your text-indent to something crazy like -9999px. That way when css is disabled (such as being crawled) the bot will see the text in the header instead of the background.
example:
CSS
#myHeader {
width:200px;
height:50px;
background: url('lcoation/of/the/image.jpg') top left no-repeat;
text-indent:-9999px;
}
HTML
<body>
...
<h1 id='myHeader'>HELLO WORLD</h1>
...
</body>
The "correct" way to do this is to have the text in the title bar or in your page's meta text.
<h1 style="font-size: 2px; margin: 0px;">Something goes here</h1>
Works like a charm.... ;-) The screen readers will interpret it and won't affect your SEO.
You're not going to get good SEO results if you, first hide the <h1>, and second use generic phrases inside the <h1>.
Don't just use the <h1> for sizing, you can use classes to style.
<h1> tags should contain keyword rich information such as:
Automotive Repair
Automotive repair being the keyword that relates to the particular page I'm theoretically working on.
Hope that makes sense.
I think that visibility: hidden; would work fine. Have you tried it yet?
Does your web site consist of just one single page?
Otherwise you should put the headline of each page in the h1 tag, not the tagline of the site. Repeating the same headline on every page would make it pretty much useless.
Resizing the block would work:
h1 {
overflow: hidden;
width: 1px;
height: 1px;
}
A full article in this matter is explained here https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/
So , when i work i use this code to support screen reader as well as hide some h1's and use pictures instead of it like (logo)
.offscreen{
position: absolute;
clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
to find more follow the link