CSS Hover - Change Title, Description and Background when hovering over block - html

I have the following CSS items that I am trying to simultaneously change the hover effect for when rolling over .blocks-item
.blocks-item
.blocks-item-title
.blocks-item-description
.blocks-item-link
I have set .blocks-item:hover to the following:
.blocks-item:hover {
background: #f8f8f8;
color: #15191f;
}
If I do the following:
.blocks-item:hover,
.blocks-item-title:hover {
background: #f8f8f8;
color: #15191f;
}
Then the title only changes colour when rolled over with the mouse which I am expecting.
I am trying to bind all of the 4 elements so that I only need to hover over .blocks-item to be able to change the hover effect of all of the other items (description, title, link)
What is the best way of going about this?
I know this has been answered many times but struggling to adapt the solutions.
Appreciate the understanding and help
HTML:
<ul class="blocks-list">
<li class="blocks-item">
<a href="/support/tickets/new" class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-pencil"></span></span>
<span class="blocks-item-title">Create Ticket</span>
<span class="blocks-item-description">Submit a tracked ticket for any IT queries or issues here</span>
</a>
</li>
<li class="blocks-item">
<a href="tel:" class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-phone-handset"></span></span>
<span class="blocks-item-title">Call Us</span>
<span class="blocks-item-description">Our call centre is available 24/7 to help with issues and queries</span>
</a>
</li>
<li class="blocks-item">
<a href="#!" onclick="window.fcWidget.open();" class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-bubble"></span></span>
<span class="blocks-item-title">Live Chat</span>
<span class="blocks-item-description">Our live chat service is available from 8am - 8pm Monday - Friday</span>
</a>
</li>
<li class="blocks-item">
<a href="mailto:?subject=Support Request - " class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-envelope"></span></span>
<span class="blocks-item-title">Email</span>
<span class="blocks-item-description">For non-urgent issues, queries or general enquiries. We will respond within 24 Hours</span>
</a>
</li>
</ul>

Since the elements are children of .blocks-item, it's pretty simple. Start with a CSS selector .blocks-item:hover and then use a selector to target what you want to change.
.blocks-item:hover .blocks-item-title {
color: red
}
.blocks-item:hover .blocks-item-description {
color: green
}
.blocks-item:hover .blocks-item-link {
font-size: 2rem;
}
<ul class="blocks-list">
<li class="blocks-item">
<a href="/support/tickets/new" class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-pencil"></span></span>
<span class="blocks-item-title">Create Ticket</span>
<span class="blocks-item-description">Submit a tracked ticket for any IT queries or issues here</span>
</a>
</li>
<li class="blocks-item">
<a href="tel:" class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-phone-handset"></span></span>
<span class="blocks-item-title">Call Us</span>
<span class="blocks-item-description">Our call centre is available 24/7 to help with issues and queries</span>
</a>
</li>
<li class="blocks-item">
<a href="#!" onclick="window.fcWidget.open();" class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-bubble"></span></span>
<span class="blocks-item-title">Live Chat</span>
<span class="blocks-item-description">Our live chat service is available from 8am - 8pm Monday - Friday</span>
</a>
</li>
<li class="blocks-item">
<a href="mailto:?subject=Support Request - " class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-envelope"></span></span>
<span class="blocks-item-title">Email</span>
<span class="blocks-item-description">For non-urgent issues, queries or general enquiries. We will respond within 24 Hours</span>
</a>
</li>
</ul>

Related

Remove text inside span

I want to remove time + icon shown in my blog page
<span><i class="fa fa-newspaper-o"></i>47 sec read</span>
I have tried using
.fa-newspaper-o{display:hidden}
but it only hides the icon before "47 sec" leaves the text displayed
Whole code
<ul class="list-inline">
<li><span class="posted-in"> <a class="national" href="http://www.fact-file.com/category/national/?customize_changeset_uuid=2a4ce41e-5aad-4e11-bb78-50c7e06dd416&customize_messenger_channel=preview-0" rel="category tag" style="background-color: #1abc9c">National</a>
<a class="top" href="http://www.fact-file.com/category/top/?customize_changeset_uuid=2a4ce41e-5aad-4e11-bb78-50c7e06dd416&customize_messenger_channel=preview-0" rel="category tag" style="">Top Story</a>
</span></li>
<li>
<span class="right"><span class="zilla-likes-count">0</span> <span class="zilla-likes-postfix"></span></span>
</li>
<li>
<span class="post-comments-number">
<i class="fa fa-comment-o"></i>0 </span>
</li>
<li><span><i class="fa fa-newspaper-o"></i>47 sec read</span></li>
</ul>
.list-inline li:nth-child(4) { display: none;} or .list-inline li:last-child { display: none;} will hide the list item in question.
To add to the above, you can use visibility: hidden if you want the removed element to still leave a footprint (take up space).
var li=document.getElementsByTagName('li');
li[li.length-1].style.visibility='hidden';
<ul class="list-inline">
<li><span class="posted-in"> <a class="national" href="http://www.fact-file.com/category/national/?customize_changeset_uuid=2a4ce41e-5aad-4e11-bb78-50c7e06dd416&customize_messenger_channel=preview-0" rel="category tag" style="background-color: #1abc9c">National</a>
<a class="top" href="http://www.fact-file.com/category/top/?customize_changeset_uuid=2a4ce41e-5aad-4e11-bb78-50c7e06dd416&customize_messenger_channel=preview-0" rel="category tag" style="">Top Story</a>
</span></li>
<li>
<span class="right"><span class="zilla-likes-count">0</span> <span class="zilla-likes-postfix"></span></span>
</li>
<li>
<span class="post-comments-number">
<i class="fa fa-comment-o"></i>0 </span>
</li>
<li><span><i class="fa fa-newspaper-o">47 sec read</i></span></li>
</ul>

How to target the second span tag in ul using pure CSS?

The Code:
<ul class="site-nav list--inline " id="SiteNav">
<li class="site-nav--active">
<a href="/" class="site-nav__link>
<span class="site-nav__label">HOME</span>
</a>
</li>
**<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">ORDER NOW</span>
</a>
</li>**
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">TRACK ORDER</span>
</a>
</li>
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">HELP CENTER</span>
</a>
</li>
</ul>
I want to target the SECOND span tag in the list with class: site-nav__label using pure CSS.(nth-child, second-of-type etc.)
I cannot add ids or classes to this span tag.
Help will be greatly appreciated.
For select the second li try with
#SiteNav li:nth-of-type(2)
and then for select the span of second li add span after:
#SiteNav li:nth-of-type(2) span
Because you want inside ul tag, I used ul.site-nav for ul tag with class site-nav
ul.site-nav li:nth-of-type(2) a > span {
border: 3px solid red;
}
<ul class="site-nav list--inline " id="SiteNav">
<li class="site-nav--active">
<a href="/" class="site-nav__link>
<span class="site-nav__label">HOME</span>
</a>
</li>
**<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">ORDER NOW</span>
</a>
</li>**
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">TRACK ORDER</span>
</a>
</li>
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">HELP CENTER</span>
</a>
</li>
</ul>
To Target the span use a combination of nth-of-type and child combinators
#SiteNav > li:nth-of-type(2) > a > span {
font-weight:bold;
color:red;
}
/*Or Target the span class*/
#SiteNav > li:nth-of-type(2) .site-nav__label {
font-style:italic;
}
<ul class="site-nav list--inline " id="SiteNav">
<li class="site-nav--active">
<!-- Fixed Missing closing " -->
<a href="/" class="site-nav__link">
<span class="site-nav__label">HOME</span>
</a>
</li>
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">ORDER NOW</span>
</a>
</li>
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">TRACK ORDER</span>
</a>
</li>
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">HELP CENTER</span>
</a>
</li>
</ul>
For a good article on nth-child (and nth-of-type) see https://css-tricks.com/useful-nth-child-recipies/

HTML RichText WIdget within Datorama Issue

I am fairly new to HTML coding, so could really use the communities help here. I have a HTML RichText widget, which I am using to create a navigation bar within our data visualization tool, Datorama. Unfortunately, when you click on the menu items, it keeps opening the page within the widget and not loading the full page.
Here is the Code:
<nav class="navigation">
<ul class="menu">
<li class="menu__item">
<a href="#" class="menu__link">
<span class="menu__title">
<span class="menu__first-word" data-hover="About">
About
</span>
<span class="menu__second-word" data-hover="Us">
Us
</span>
</span>
</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">
<span class="menu__title">
<span class="menu__first-word" data-hover="Our">
Our
</span>
<span class="menu__second-word" data-hover="History">
History
</span>
</span>
</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">
<span class="menu__title">
<span class="menu__first-word" data-hover="Latest">
Latest
</span>
<span class="menu__second-word" data-hover="News">
News
</span>
</span>
</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">
<span class="menu__title">
<span class="menu__first-word" data-hover="New">
New
</span>
<span class="menu__second-word" data-hover="Arrivals">
Arrivals
</span>
</span>
</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">
<span class="menu__title">
<span class="menu__first-word" data-hover="On">
On
</span>
<span class="menu__second-word" data-hover="Sale">
Sale
</span>
</span>
</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">
<span class="menu__title">
<span class="menu__first-word" data-hover="Contact">
Contact
</span>
<span class="menu__second-word" data-hover="Us">
Us
</span>
</span>
</a>
</li>
</ul>
Could anyone please assist in adjusting this to when a menu item is clicked, it opens a new page?
Thank you,
-Nakul B.
I'm Johnny from Datorama's Tier 2 Support,
Because the Rich Text works with iFrames, it means that the browser opens a new embedded HTML document within the active one, and links are opened within the embedded iFrame instead of the tab itself, or a new tab.
This can be controlled by working with the a tag's 'target' attribute, and the following options can be assigned:
_blank - new window or tab
_self - Opens within the same window or iFrame (default behaviour)
_parent - Opens the link within the parent frame
_top - Opens within the full body of the window
In the case mentioned, we should use the '_blank' attribute, and the following code should be used:
<nav class="navigation">
<ul class="menu">
<li class="menu__item">
<a href="https://google.com" class="menu__link" target="_blank">About Us
</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link" target="_blank">Our History
</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link" target="_blank">Latest News
</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link" target="_blank">New Arrivals
</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link" target="_blank">On Sale
</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link" target="_blank">Contact Us
</a>
</li>
</ul>
I've also changed the structure of the a tags, and reduced the number of span within it, to increase readability. Now the links should open a new page/tab on click.
Please don't hesitate to contact us at support#datorama.com for further assistance for setting your widget up!

Adjusting space between multiple icons or text in Bootstrap dropdown list item

I'm using a css class to allow me to put an 'add' link and an 'edit' link side-by-side in the same item on a Bootstrap dropdown list.
<li class="multilink"><a data-toggle="modal" data-target="#.."><span class="glyphicon glyphicon-plus "></span></a></span> Collections</li>
Edit: the whole menu item
<li class="dropdown">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span><span class="caret"></span>
<ul class="dropdown-menu dropdown-menu-right" >
<li>
<a data-toggle="modal" data-target="#SectionRosterModal">Roster
</a>
</li>
<!-- Announcments -->
<li class="multilink">
<a data-toggle="modal" data-target="#AnnouncementAddModal">
<span class="glyphicon glyphicon-plus glyphhover pointerhover">
</span>
</a>
<a href ={% url 'gbook:editlist' to_edit='ann' Course_id=this_course.pk Section_id=active_section.pk %}>
<span class="glyphicon glyphicon-edit glyphhover">
</span> Announcements
</a>
</li>
{# <li>Edit Announcements</li> #}
<!-- Courses -->
<li class="multilink">
<a data-toggle="modal" data-target="#CourseAddModal">
<span class="glyphicon glyphicon-plus glyphhover pointerhover">
</span>
</a>
<a href={% url 'gbook:doedit' to_edit='cou' pk=this_course.pk Course_id=this_course.pk Section_id=active_section.pk %}>
<span class="glyphicon glyphicon-edit glyphhover">
</span> Course
</a>
</li>
<!-- Sections -->
<li class="multilink">
<a data-toggle="modal" data-target="#SectionAddModal">
<span class="glyphicon glyphicon-plus glyphhover pointerhover">
</span>
</a>
<a href ={% url 'gbook:editlist' to_edit='sec' Course_id=this_course.pk Section_id=active_section.pk %}>
<span class="glyphicon glyphicon-edit glyphhover">
</span> Sections
</a>
</li>
<!-- Scollections -->
<li class="multilink">
<a data-toggle="modal" data-target="#ScollectionAddModal">
<span class="glyphicon glyphicon-plus glyphhover pointerhover">
</span>
</a>
<a href ={% url 'gbook:editlist' to_edit='sco' Course_id=this_course.pk Section_id=active_section.pk %}>
<span class="glyphicon glyphicon-edit glyphhover">
</span> Scollections
</a>
</li>
</ul>
</li>
CSS:
.dropdown-menu > li > a:hover {
background-image: none;
}
.open> ul>li.multilink{
display: inline-flex !important;
}
The item looks like this:
What I want is for the two icons to be fairly snug on the LHS, followed by the text (linked to the edit link). Additionally, is there any way to disable the active link color change? I have taken off the background-image, but there's still an associated color change.
So I put the code you provided into a JSFiddle. With just Bootstrap CSS the two glypicons are right next to each other. Can you provide more of you html and css because something else is causing the styling you do not want.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
<ul>
<li class="multilink">
<a data-toggle="modal" data-target="#..">
<span class="glyphicon glyphicon-plus "></span>
</a>
<a href ="">
<span class="glyphicon glyphicon-edit"></span> Collections
</a>
</li>
</ul>
I will edit my answer when you provide more html and css
** EDIT **
In bootstrap's css file they have this:
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
That css is causing there to be 20px of padding between your two links. Adjust the padding to get the appearance you are looking for.
.dropdown-menu>li>a {
padding: 3px 5px;
}

Is there a way to prevent scrolling up using ng-click in the view?

When I click in a link my page scrolls up, I know if I handle this inside the controller I can put an event.preventDefault() there, but I don't want this on controller.
Is there a way to handle this in my view?
<li ng-hide="showMore">
<a href="#" ng-click="showMore=!showMore">
<span class="fa fa-plus-circle"></span> <br>
Mais
</a>
</li>
<li ng-class="{'active':showMore}" ng-show="showMore">
<a href="#" ng-click="showMore=!showMore">
<span class="fa fa-minus-circle"></span> <br>
Menos
</a>
</li>
I would remove the <a> tag altogether and replace it with a span.
<span class="link" data-ng-click="showMore = !showMore">
<span class="fa fa-plus-circle"></span> <br>
Mais
</span>
</span>
CSS
span.link {
cursor:pointer;
color:blue;
}
span.link:hover {
text-decoration:underline;
cursor:pointer;
}
The <a> tag does not to have the href attribute. Removing it should help.
Also, semantically, this is not a link, but a button, so it would be more correct to use <input type="button"> or <button> tag instead of <a>.
You can always use "#!"
Like this:
<li ng-hide="showMore">
<a href="#!" ng-click="showMore=!showMore">
<span class="fa fa-plus-circle"></span> <br>
Mais
</a>
</li>
<li ng-class="{'active':showMore}" ng-show="showMore">
<a href="#!" ng-click="showMore=!showMore">
<span class="fa fa-minus-circle"></span> <br>
Menos
</a>
</li>