<h2 title="Site Owner">Mr. Mark </h2>
Is it possible to edit/style the HTML title (works like a tool-tip) attribute as illustrated above with CSS?
I tried styling it with inline css but it's not coming through.
Yes, you will need a [title]:hover::after rule as below:
h2[title]:hover::after {
content: attr(title);
position: absolute;
color: red;
top: 200;
left: 200;
}
<h2 title="Site Owner">Mr. Mark </h2>
<span title="file 1"> Files</span>
a[title]:hover::after {content: attr(title);position: absolute;top: -100%;left:0;}
Related
I have a picture that should be at 100% of the pc screen, but when I use 100vh the elements start to adapt and the elements roll off.
Using height: 100% makes the image too big and doesn't look like it was originally.
Is it possible to somehow get the value 100vh once, and then it would be unchanged?
.main_page {
position: absolute;
width: 100%;
height: 100%;
background-color: black;
}
<div class="main_page">
<!-- Black wallpaper-->
<div class="black_opacity">
<!-- Main wallpaper -->
<div class="main_wallpaper">
<img src="https://cdn.discordapp.com/attachments/797132503546069002/1045624974016262234/2801907.jpg" alt="">
</div>
<!-- Main wallpaper end -->
</div>
<!-- Black wallpaper end-->
<!-- Book-->
<div class="book_cover">
<img src="https://cdn.discordapp.com/attachments/797132503546069002/1046492404011782164/20221127_144830.png" alt="">
</div>
<div class="book_info">
<h1> name... </h1>
<h2> description...</h2>
</div>
<div class="button_div">
<button class="book_buttons" id="Buy"> buy at 2.50$</button>
<button class="book_buttons" onclick="read_click()"> Read book</button>
</div>
</div>
I've tried to use javascript, but I didn't get any response from html. It didn't take a screen value.
First of all, the class name in HTML is written as main_wallpaper but in CSS it's .main_page so you need to rename one of them so they match. There are a few ways you can achieve full height and screen. I like one of CSS-Tricks version of how to do this.
In the HTML:
<div class="main_wallpaper">
<img class="main_img" src="https://cdn.discordapp.com/attachments/797132503546069002/1045624974016262234/2801907.jpg" alt="">
</div>
In CSS:
.main_wallpaper {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.main_img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
I have a wordpress site with this image boxes
each box is an event, this events have tags ,also reflectes in a class, what i need to do is all the elements with an specific class ("free" in this case) to have a little non clickable button or a text with a background that says "Free" in the upper corner of the box, no, this boxes are generated with a plugin and its just a shortcode, so i cannot directly change the html, so i tried doing it with just css and javascript
This is a single Event with the tag (named "tag-gratis")
<article id="post-9072" class="regular post-9072 post type-post status-
publish format-standard has-post-thumbnail category-eventos185 tag-
culturales tag-fuera-del-barrio tag-gratis">
<div class="inner-wrap animated">
<div class="post-content">
<div class="content-inner">
<span
class="post-featured-img" style="background-image:
url(https://vivirenuevacba.com/wp-content/uploads/2019/01/genaro_perez_7-
800x589.jpg);"></span>
<div class="article-content-
wrap">
<span class="meta-
category"><a class="eventos185"
href="https://vivirenuevacba.com/category/eventos185/">EVENTOS</a></span>
<div class="post-
header">
<h3
class="title">
<a href="https://vivirenuevacba.com/museo-genaro-perez/">
Museo Genaro Pérez
</a>
</h3>
<span
class="meta-author"><span>By</span> <a
href="https://vivirenuevacba.com/author/Vics/" title="Entradas de Vics"
rel="author">Vics</a></span> <span class="meta-category">| EVENTOS</span>
</div><!--/post-header-->
</div><!--article-content-wrap-
->
</div><!--/content-inner-->
</div><!--/post-content-->
</div><!--/inner-wrap-->
</article><!--/article-->
Here is a simple button that i did with css
.button {
margin-top: 20px;
line-height: 60px;
font-weight: bold;
padding: 0 40px;
background: salmon;
border: none;
}
and here is my javascript
document.addEventListener('DOMContentLoaded', function() {
$(function() {
$('.tag-gratis').each(function() {
var button = document.createElement("button");
button.innerHTML = "GRATIS";
var body = document.getElementsByClassName(".tag-gratis");
body.appendChild(button);
});
});
});
</script>
Now the button doesnt appear and i just get a
"Uncaught TypeError: body.appendChild is not a function"
I don't think there is any need to use JavaScript here. A simple pseudo element would suffice.
.tag-gratis {
position: relative;
}
.tag-gratis img {
width: 100%;
}
.tag-gratis::after {
content: "FREE";
position: absolute;
top: 20px;
right: 20px;
padding: 5px 10px;
background: salmon;
color: white;
}
<article class="tag-gratis">
<img src="//placehold.it/300x150">
</article>
Since document.getElementsByClassName is a collection you need to pass the index to get th element
Try this
document.getElementsByClassName(".tag-gratis")
I have this menu, that (when you hover over an icon) makes the icon bigger. What I tried to achieve is, to have it display correctly from both sizes, which doesn't quite work. It only works from the left side, because of the unordered list, but is there a way to make it work from both sides? (basically so the icon covers the one to the right and the one to the left without pushing it). I have this:
HTML:
<!-- START OF THE MENU !-->
<div class="menu-outer" style="font-family: 'Open Sans', sans-serif;;">
<div class="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<nav>
<ul class="menu">
<center>
<img class="icon" src="games.png">
<img class="icon" src="home.png">
<img class="icon" src="contact.png">
<img class="icon" src="wai.png">
<img class="icon" src="wita.png">
</center>
</ul>
</nav>
</div>
<a class="menu-close" onClick="return true">
<div class="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
</div>
</a>
<!-- END OF THE MENU!-->
CSS:
.icon{
display: inline-block;
margin-right: -5;
}
.icon:hover{
width: 155px;
margin: -15px -22px -15px -13px;
}
.menu{
z-index: 10;
}
Thanks for all the help.
If anything, it's all uploaded here (in the right corner menu):
http://goolag.pw/delete2.html
Add the following to your CSS:
.icon{
position: relative;
z-index: 10;
}
.icon:hover{
z-index: 100;
}
By increasing the z-index, the hovered icon is moved up in the DOM-layer, and displayed above the other icons.
You need to use z-index, but in order to do that, you need to add the element a positioning. I tried this and worked:
.menu a:hover{
z-index: 150;
position: relative;
}
You may want to set all the images' z-index property to a negative value and when the image hovers, set it to a positive one. I don't know if this is a bug but that's how it behaves, take a look at this fiddle:
#one {
width: 100px;
height: 40px;
background: red;
z-index: 10;
}
#two {
width: 100px;
height: 40px;
background: blue;
position: relative;
top: -20px;
left: 20px;
z-index: -1;
}
If you set the first element's z-index to a >0 value, it won't show over the second one until it's z-index is set to something <0.
I'm trying to get the icon to display in the middle of the words 'some text'.
Could anyone advise?
http://jsfiddle.net/LZxxB/50/
<div>
<div style="display:inline-block;">some</div>
<span class='ui-btn-icon-notext ui-icon-arrow-u-l' style="display:inline-block;"></span>
<div style="display:inline-block;">text</div>
</div>
Here is one way to do it. You basically make an icon button that is not a button.
The HTML:
<div>
<div style="display:inline-block;">some</div>
<span class="ui-nodisc-icon ui-alt-icon nonbuttonicon" >
<span class="ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-inline"></span>
</span>
<div style="display:inline-block;">text</div>
</div>
The CSS:
.nonbuttonicon .ui-btn {
background: transparent;
cursor: default;
border: 0;
margin: 0;
}
.nonbuttonicon .ui-btn:hover{
background: inherit;
}
DEMO
UPDATE:
Here is a way without using jQM buttons and a single span:
<div>
<div style="display:inline-block;">some</div>
<span class="ui-alt-icon ui-icon-delete ui-btn-icon-notext inlineIcon"></span>
<div style="display:inline-block;">text</div>
</div>
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
}
.inlineIcon:after{
background-color: transparent;
}
Updated DEMO
An if you like the white icon on top of the round disk, the CSS becomes even simpler:
<span class="ui-icon-delete ui-btn-icon-notext inlineIcon"></span>
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
}
DEMO
These lines of code will reset the jquery mobile css that is displaying it differently. You might need to tweak it a little bit to fit your needs.
div span.ui-icon-arrow-u-l:after {position:relative;}
div span.ui-icon-arrow-u-l {display:inline-block;height:30px;margin-top:0;width:16px;}
Hope this helps.
I created a notecard image where i overlayed multiple images on top of it. These are elements of the notecard. I want it so that when I hover over the notecard, I can completely change the contents on the notecard image (overlaying new things onto the notecard).
So right now, I have this right now:
<div style="position:relative;">
<a href="#games">
<img id "image_a" a" src="images/card_normal.png" onmouseover "this.src rc 'images/hover/card_hover.png';" ;" onmouseout "this.src rc 'images/card_normal.png';" ;" style="position: absolute; top: 0; left: 0;"/>
<img id "image_b" b" src="images/category_icons/icon_games.png" style="position: absolute; top: 10px; left: 40px;"/>
<img id "image_c" c" src="images/category_titles/title_games.png" style="position: absolute; top: 160px; left: 40px;"/>
</a>
</div>
Where the notecard changes into a "hovered" version, but I am unable to change anything else. I want it so that whenever the mouse pointer is in the notecard (including if its on other elements inside the notecard), the contents change. I want to completely scrap the contents of it (so the title and icon) and change it so I can add text and overlay new images.
How can I do this in JS/HTML/etc?
If the two versions (hover/non-hover) are significantly different (and you want a no-js solution), you could have two divs, one set to hide, one set to show. Then on-hover, you change their visibility. Fiddle.
<div class="card">
<div class="no-hover">
stuff you want to show when the user is just looking
</div>
<div class="on-hover">
stuff you want to show when the user hovers
</div>
</div>
CSS:
.no-hover {
display: block;
}
.on-hover {
display: none;
}
.card:hover > .on-hover {
display: block;
}
.card:hover > .no-hover {
display: none;
}
It's extra HTML elements, but might be easier to maintain.
Based on your comment to Learner's answer, here is an example of the idea you are describing:
HTML:
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
CSS:
.outer {
width: 304px;
height: 304px;
background-color: black;
}
.inner {
float: left;
width: 150px;
height: 150px;
background-color: red;
border: 1px solid black;
display: none;
}
.outer:hover .inner {
display: block;
}
DEMO
If you are trying to achieve something like this:
http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide-hover/index.htm
Here's your solution:
http://www.robertkuzma.com/2011/01/jquery-animated-swap-div-content-on-hover-effect/