I've been a bit confusing on how to do so...
This is my code:
<div class="game_grid">
<center><div id="game_name"><?php echo $game_name; ?><br /></div></center>
<div id="game_image"><img src="images/games_images/<?php echo $game_image; ?>" width="120" height="120" /></div>
</div>
I failed to use "text-decoration:underline;" to make the title (game_name) underline when I put my mouse over the game image...
Any idea?
I do not know what is needed and what not in your HTML, so I'll just show a few examples, take a pick.
For example a simple build: http://jsfiddle.net/B6gD4/
Maybe style the image: http://jsfiddle.net/B6gD4/1/
And finally your IDs added if necessary for anything other than styling: http://jsfiddle.net/B6gD4/2/
Simple HTML:
<div class="game_grid">
<a href="game_page.php?id=1">
<img id="game_img" src="images/games_images/<?php echo $game_image; ?>" width="120" height="120" />
<span id="game_name">Title</span>
</a>
</div>
CSS:
.game_grid {
text-align: center;
}
.game_grid a {
text-decoration:none;
}
.game_grid a:hover {
text-decoration:underline;
}
.game_grid img {
/* any styles */
}
.game_grid span {
display:block;
font-weight: bold;
}
You can add your div styles to the respective game_grid span or game_grid img, keeping the same look but shortening your HTML by 50%.
There are alot of elements in between them. So CSS won't be easy to do that, you can try out jQuery for this:
$('#game_image').hover(function () {
$('#game_name').css('text-decoration', 'underline');
}
CSS would have been possible if they were siblings of the same parent element. Then you would have used:
#game_image:hover + #game_name {
text-decoration: underline;
}
If the name was the direct child of the image element (which is not possible although) then you would have used > child selector. But at this stage, you should use jQuery to query among the elements.
Related
How do I make the first line of ::after in bold?
I'm making a CSS snippet for Obsidian. I want to make a Dropdown for tags that start with '#-'. How do I make the first line bold?
I can't change HTML code:
<p>
<a href="#-Dropdown" class="tag" target="_blank" rel="noopener">
#-Dropdown
</a>
</p>
Those CSS blocks don't even appear in the devtools:
a.tag[href^='#-']::after::content {
font-size: 20px;
}
a.tag[href^='#-']::after::first-line {
color: red;
}
A jsfiddle if you're willing to try yourself
I have a image tag like,
<img src="image/path/goes/here/random_id">
and the random_id is changing randomly. How to catch this tag from an external css file without using id,class or any other attribute.
You can use path contains selector on src attribute
acording to this
https://www.w3schools.com/cssref/sel_attr_contain.asp
img[src*="image/path/goes/here/"]{
border:1px solid red;
min-width:50px;
min-height:50px;
}
<img src="image/path/goes/here/123">
<img src="image/path/goes/here/321">
<img src="this/is/another/path/321">
I don't know what you are aiming to . However this is the solution you asked for (I suggest to give a style using jQuery selector as it seems you are using dynamic IDs .
img[src="hello/world/123"]{
border:10px solid red;
}
<img src="hello/world/123">
You can put it in a div tag and the reference it as a child.
<div>
<img src="your_path/path">
</div>
Then in CSS..
div:first-child {
do css here...
}
I have twelve <a href> links that lead to different categories. As a means of orientation for the user I would like to emphasise the very category (<a href>-button) that the user is in right now.
How can I achieve this in CSS? I read about selected and active, but I haven't been able to make it work yet.
This is one of the links/buttons:
<span class="category_item"></span><span class="category_description">Handy & Co.</span>
The corresponding CSS:
.category_item {
display:inline-block;
background:url(../img/category_item/ph.png) no-repeat;
width: 45px;
height: 45px;
margin-right: 11px;
margin-bottom: 20px;
}
.category_item:hover {
background:url(../img/category_item/hover.png);
}
.category_description {
position: absolute;
font-size: 11px;
color: #000;
margin-top: 43px;
margin-left: -62px;
z-index: 1;
opacity: 0;
}
Thank you in advance!
You can run some jquery code when you load the page that checks the link urls with the current page's url and setting a class on the links that match.
JSFiddle: http://jsfiddle.net/og4o1tdh/2/
something like this:
HTML:
<div id="categories">
<span class="category_description">Google</span>
<!-- jsfiddle code is apparently run on fiddle.jshell.net -->
<span class="category_description">JSFiddle</span>
</div>
JS:
$('#categories a').each(function (){
var link = $(this).attr('href');
if (window.location.href.indexOf(link) > -1) {
$(this).find('span').addClass('currentCategory');
}
});
CSS:
.currentCategory {
color: orange;
font-weight: bold;
}
To give a special class to an anchor when a user clicks you can use simple javascript and jQuery.
Give all the anchor's you want to be in the scope of this a class for instance:
HTML:
<a class="nav-link" href="http://www.google.com"> Google </a>
<a class="nav-link" href="http://www.yahoo.com"> Yahoo </a>
Javascript:
$(".nav-link").on("click", function() {
$(this).addClass("active");
});
To make sure you only have one anchor with "active" class I would do the following:
$(".nav-link").on("click", function() {
$(".nav-link").removeClass("active");
$(this).addClass("active")
});
There is no built-in way of knowing which link is the current one. The easiest way may be to use javascript to check the current URL by document.URL and add a CSS class to the link with an equal href attribute. Then, you may style this class in CSS.
CSS doesn't know what page you are on.
To do this you will have to change your HTML markup, for example: to add:
<a class="current-page" href="index.php?category=handy&location=&sort=" ...
on the relevant link which you can use to 'hook' an new CSS style onto:
.current-page { color: red; }
The alternative is to use Javascript to 'read' the URL and apply a style.
You could...
Simply add a unique classname to the body tag or (some element that wraps around the anchor tags). And then style your links accordingly. This option is quite easy if you have access to change the HTML in your pages:
HTML
<body class="category_handy">
...
<a href="..." class="category_handy">
<span class="category_item"></span>
<span class="category_description">Handy & Co.</span>
</a>
....
</body>
CSS
body.category_handy a.category_handy {
color:red;
}
body.category_dandy a.category_dandy {
color:yellow;
}
body.category_something a.category_something {
color: blue;
}
If you don't have access to directly edit each page, you may have to dynamically check the URL, and then add a classname (like "current") to the anchor tag who's href attribute matches.
Either way, the solution will not involve "css only".
I need to display ex: $300.00, but I need the dollar sign to be displayed smaller than the number so its going to look like a trademark, but not that small.
Is there a CSS function that does that?
Thank you in advance.
Could be something like this?
HTML:
<span class="dollar">300.00</span>
CSS:
.dollar:before {
content: '$';
font-size: somethingSmaller;
}
See this fiddle and let me know if this helps.
But only if not empty!
.currency:not(:empty):before {
top: 0;
content: "$";
}
<span class="currency">10.5</span><br />
<span class="currency"></span><br />
<span class="currency">42</span><br />
Use a <span> element to style in-line text:
HTML:
<span class="currency">$</span>
<span class="price">300</span>
CSS:
.currency{
font-size:.5em;
vertical-align:text-top; /* resembling more the tm symbol you mentioned */
}
A fiddle for convenience...
The difference from lante's answer is that this will work in much older browsers as well. For more info, see the support for :before and :after pseudo elements.
Use the :before pseudo selector
.amount:before {
content: "$";
font-size:.9em;
}
A very simple way to do this would be :
HTML :
<div class="text">
<span class="dollar">$</span>300
</div>
CSS :
.text {
font-size: 18px;
}
.dollar {
font-size:15px;
}
See here->http://jsfiddle.net/xMKsH/
However, if you understand pseudo-selectors well, you would be better off using this:
HTML:
<div class="text">300</div>
CSS:
.text {
font-size: 18px;
}
.dollar:before {
content:'$';
font-size:15px;
}
See here->http://jsfiddle.net/xMKsH/1/
Hope this helps!!
If you really must do this, use
<small>$</small>300.00
and, if desired, set the size of small in CSS, e.g.
small { font-size: 75% }
I'm using a <span class="image"> with a background:
.image {
background-image: url("image.jpg")
}
How can I also add a hint on this image when people put the mouse over it?
Is there a CSS way to achieve this?
Use the HTML title attribute:
<span class="image" title="This is a hint.">
You can do something with :after content:
.image:hover:after {
content:"This is a hint";
}
Demo: http://jsfiddle.net/fXuSB/
However, this content is probably better off in the HTML (and your image actually might be as well). You can use the title attribute for a simple default tooltip, or perhaps something like this:
<span class="image">
<span class="hint">This is a hint</span>
</span>
.image .hint {
display:none;
}
.image:hover .hint {
display:block;
}
Demo: http://jsfiddle.net/fXuSB/1/