0

super css noob here.

I'm using a wordpress plugin called visual composer which allows you to name a Row (it's like a block element) with a Row ID or a Class name. I'm trying to have it so when a user hovers over this row and when they click it, this clicking will simply take them to another page within my website.

It allows for an area to have the css for this class or ID that I can associate with the tag, but after searching I'm either searching the wrong thing or can't find it but I am looking for the css that would allow me to do this!

Kyle B
  • 1
  • 1

4 Answers4

1

You can't only use css to link to other page, you need javascript. For example the class name is linkPage: 

document.getElementsByClassName('linkPage')[0].onclick = function(){
   location.href= 'some url...'
}
<div class="linkPage">linkPage</div>
Sing
  • 3,942
  • 3
  • 29
  • 40
0

You'd need to inject a bit of JS into the theme that listens on window for a click with the desired ID or class, then call window.location.href = URL or something of that nature.

CSS doesn't have the power to cause browser location changes.

probablyup
  • 7,636
  • 1
  • 27
  • 40
0

CSS
CSS (Cascading Style Sheet), as its name states, defines a set of rules and properties for an HTML page you wish to style (stuff like colors, size, asf); and user interaction (even as minor as pointing to an URL) are not part of its scope.

Basic
Talking about a giant like WordPress and a strong plugin such as Visual Composer, extremely old and standard features like link/image/table asf are always to be found. You may have a look at visual composer's "Raw HTML" feature (https://vc.wpbakery.com/features/content-elements/) in combination with a regular "a" tag (http://www.w3schools.com/tags/tag_a.asp).

Editable
Asking how page linking can be achieved through editing of a CSS file, then you might as well look into different editable content types of the plugin - such as HTML or JS.

Click on table row
Best approach to have table cells/rows clickable would be by the use of JavaScript; see Adding an onclick event to a table row

Community
  • 1
  • 1
DingDong
  • 75
  • 1
  • 14
0

Link using jQuery and Javascript (easier method):

$(".link").click(function(){
   window.location.replace('https://www.example.com');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>

Link using pure Javascript (harder method):

x = document.querySelectorAll('.link').length;
y = 1;

while (x => y) {
  document.getElementsByClassName("link")[y].onclick = function() {
    window.location.replace("https://www.example.com");
  };
  y++;
}
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
topsoftwarepro
  • 773
  • 5
  • 19